認(rèn)識(shí)jQuery的Promise的具體使用方法
先前了解了ES6的Promise對(duì)象,來(lái)看看jQuery中的Promise,也就是jQuery的Deferred對(duì)象。
打開(kāi)瀏覽器的控制臺(tái)先。
<script> var defer = $.Deferred(); console.log(defer); </script>
運(yùn)行結(jié)果:
和ES6的Promise對(duì)象長(zhǎng)的有點(diǎn)像,jQuery的Deferred對(duì)象也有resolve、reject、then方法,還有done、fail、always......方法。jQuery就是用這個(gè)Deferred對(duì)象來(lái)注冊(cè)異步操作的回調(diào)函數(shù),修改并傳遞異步操作的狀態(tài)。
玩玩Deferred:
<script> function runAsync(){ var defer = $.Deferred(); //做一些異步操作 setTimeout(function(){ console.log('執(zhí)行完成'); defer.resolve('異步請(qǐng)求成功之后返回的數(shù)據(jù)'); }, 1000); return defer; } runAsync().then(function(data){ console.log(data) }); </script>
運(yùn)行之后,Deferred對(duì)象的實(shí)例defer通過(guò)resolve方法把參數(shù) “異步請(qǐng)求成功之后返回的數(shù)據(jù)” 傳回到then方法中進(jìn)行接收,,打印。
和ES6的Promise相似,但是有一點(diǎn)點(diǎn)區(qū)別,再看下Promise:
<script> function runAsync(){ var p = new Promise(function(resolve, reject){ setTimeout(function(){ console.log('執(zhí)行完成'); resolve('異步請(qǐng)求成功之后返回的數(shù)據(jù)'); }, 1000); }); return p; } runAsync().then(function(data){ console.log(data); }); </script>
我們發(fā)現(xiàn):
1、創(chuàng)建Deferred對(duì)象的時(shí)候沒(méi)有傳參;而創(chuàng)建Promise對(duì)象的時(shí)候,傳了參數(shù)(傳了一個(gè)匿名函數(shù),函數(shù)也有兩個(gè)參數(shù):resolve、reject);
2、Deferred對(duì)象直接調(diào)用了resolve方法;而Promise對(duì)象則是在內(nèi)部調(diào)用的resolve方法;
說(shuō)明:Deferred對(duì)象本身就有resolve方法,而Promise對(duì)象是在構(gòu)造器中通過(guò)執(zhí)行resolve方法,給Promise對(duì)象賦上了執(zhí)行結(jié)果的狀態(tài)。
這樣就有一個(gè)弊端:因?yàn)镈eferred對(duì)象自帶resolve方法,拿到Deferred對(duì)象之后,就可以隨時(shí)調(diào)用resolve方法,其狀態(tài)可以進(jìn)行手動(dòng)干預(yù)了
<script> function runAsync(){ var defer = $.Deferred(); //做一些異步操作 setTimeout(function(){ console.log('執(zhí)行完成'); defer.resolve('異步請(qǐng)求成功之后返回的數(shù)據(jù)'); }, 1000); return defer; } var der = runAsync(); der.then(function(data){ console.log(data) }); der.resolve('在外部結(jié)束'); </script>
這樣的話就直接在外部直接給Deferred設(shè)置了狀態(tài),打印“在外部結(jié)束”,1s后打印“執(zhí)行完成”,不會(huì)打印“異步請(qǐng)求成功之后返回的數(shù)據(jù)”了。
顯然,這不好。我發(fā)個(gè)異步請(qǐng)求,還沒(méi)收到數(shù)據(jù)就讓人在外部給我結(jié)束了。。。。。。。
當(dāng)然這個(gè)坑jQuery肯定會(huì)填的,在Deferred對(duì)象上有一個(gè)promise方法,是一個(gè)受限的Deferred對(duì)象
<script> function runAsync(){ var def = $.Deferred(); //做一些異步操作 setTimeout(function(){ console.log('執(zhí)行完成'); def.resolve('請(qǐng)求成功之后返回的數(shù)據(jù)'); }, 2000); return def.promise(); //就在這里調(diào)用 } </script>
所謂受限的Deferred對(duì)象,就是沒(méi)有resolve和reject方法的Deferred對(duì)象。這樣就無(wú)法在外邊改變Deferred對(duì)象的狀態(tài)了。
Deferred對(duì)象的then方法和done、fail語(yǔ)法糖
我們知道,在ES6的Promise規(guī)范中,then方法接受兩個(gè)參數(shù),分別是執(zhí)行完成和執(zhí)行失敗的回調(diào),而jquery中進(jìn)行了增強(qiáng),還可以接受第三個(gè)參數(shù),就是在pending狀態(tài)時(shí)的回調(diào),如下:
deferred.then( doneFilter [, failFilter ] [, progressFilter ] )
then方法:
<script> function runAsync(){ var def = $.Deferred(); //做一些異步操作 setTimeout(function(){ var num = Math.ceil(Math.random()*10); //生成1-10的隨機(jī)數(shù) if(num<=5){ def.resolve(num); } else{ def.reject('數(shù)字太大了'); } }, 2000); return def.promise(); //就在這里調(diào)用 } runAsync().then(function(d){ console.log("resolve"); console.log(d); },function(d){ console.log("reject"); console.log(d); }) </script>
Deferred對(duì)象的then方法也是可以進(jìn)行鏈?zhǔn)讲僮鞯摹?/p>
done,fail語(yǔ)法糖,分別用來(lái)指定執(zhí)行完成和執(zhí)行失敗的回調(diào),與這段代碼是等價(jià)的:
<script> function runAsync(){ var def = $.Deferred(); //做一些異步操作 setTimeout(function(){ var num = Math.ceil(Math.random()*10); //生成1-10的隨機(jī)數(shù) if(num<=5){ def.resolve(num); } else{ def.reject('數(shù)字太大了'); } }, 2000); return def.promise(); //就在這里調(diào)用 } runAsync().done(function(d){ console.log("resolve"); console.log(d); }).fail(function(d){ console.log("reject"); console.log(d); }) </script>
always的用法
jquery的Deferred對(duì)象上還有一個(gè)always方法,不論執(zhí)行完成還是執(zhí)行失敗,always都會(huì)執(zhí)行,有點(diǎn)類似ajax中的complete。
$.when的用法
jquery中,還有一個(gè)$.when方法來(lái)實(shí)現(xiàn)Promise,與ES6中的all方法功能一樣,并行執(zhí)行異步操作,在所有的異步操作執(zhí)行完后才執(zhí)行回調(diào)函數(shù)。不過(guò)$.when并沒(méi)有定義在$.Deferred中,看名字就知道,$.when,它是一個(gè)單獨(dú)的方法。與ES6的all的參數(shù)稍有區(qū)別,它接受的并不是數(shù)組,而是多個(gè)Deferred對(duì)象,如下:
<script> function runAsync(){ var def = $.Deferred(); //做一些異步操作 setTimeout(function(){ var num = Math.ceil(Math.random()*10); //生成1-10的隨機(jī)數(shù) def.resolve(num); }, 2000); return def.promise(); //就在這里調(diào)用 } $.when(runAsync(), runAsync(), runAsync()) .then(function(data1, data2, data3){ console.log('全部執(zhí)行完成'); console.log(data1, data2, data3); }); </script>
jquery中沒(méi)有像ES6中的race方法嗎?就是以跑的快的為準(zhǔn)的那個(gè)方法。對(duì)的,jquery中沒(méi)有。
以上就是jquery中Deferred對(duì)象的常用方法了。
在上一篇和本篇當(dāng)中,都是用一次性定時(shí)器來(lái)代替了異步請(qǐng)求進(jìn)行數(shù)據(jù)處理。為什么沒(méi)用ajax呢,不是因?yàn)槁闊谶@里要說(shuō)一下ajax和Deferred的聯(lián)系:
jquery的ajax返回一個(gè)受限的Deferred對(duì)象,也就是沒(méi)有resolve方法和reject方法,不能從外部改變狀態(tài),既然是Deferred對(duì)象,那么我們上面講到的所有特性,ajax也都是可以用的。比如鏈?zhǔn)秸{(diào)用,連續(xù)發(fā)送多個(gè)請(qǐng)求:
<script> req1 = function(){ return $.ajax(/* **** */); } req2 = function(){ return $.ajax(/* **** */); } req3 = function(){ return $.ajax(/* **** */); } req1().then(req2).then(req3).done(function(){ console.log('請(qǐng)求發(fā)送完畢'); }); </script>
success、error與complete
這三個(gè)方法是我們常用的ajax語(yǔ)法糖。
$.ajax(/*...*/) .success(function(){/*...*/}) .error(function(){/*...*/}) .complete(function(){/*...*/})
有時(shí)候比較喜歡在內(nèi)部作為屬性來(lái)處理。
分別表示ajax請(qǐng)求成功、失敗、結(jié)束的回調(diào)。這三個(gè)方法與Deferred又是什么關(guān)系呢?其實(shí)就是語(yǔ)法糖,success對(duì)應(yīng)done,error對(duì)應(yīng)fail,complete對(duì)應(yīng)always,就這樣,只是為了與ajax的參數(shù)名字上保持一致而已。
總結(jié):
$.Deferred實(shí)現(xiàn)了Promise規(guī)范,then、done、fail、always是Deferred對(duì)象的方法。$.when是一個(gè)全局的方法,用來(lái)并行運(yùn)行多個(gè)異步任務(wù),與ES6的all是一個(gè)功能。ajax返回一個(gè)受限的Deferred對(duì)象,success、error、complete是ajax提供的語(yǔ)法糖,功能與Deferred對(duì)象的done、fail、always一致。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 深入解析jQuery中Deferred的deferred.promise()方法
- 詳解JavaScript異步編程中jQuery的promise對(duì)象的作用
- jQuery的promise與deferred對(duì)象在異步回調(diào)中的作用
- jQuery中的Deferred和promise 的區(qū)別
- 以jQuery中$.Deferred對(duì)象為例講解promise對(duì)象是如何處理異步問(wèn)題
- Jquery promise實(shí)現(xiàn)一張一張加載圖片
- jQuery Deferred和Promise創(chuàng)建響應(yīng)式應(yīng)用程序詳細(xì)介紹
- 在jQuery1.5中使用deferred對(duì)象 著放大鏡看Promise
相關(guān)文章
jQuery事件綁定與解除綁定實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery事件綁定與解除綁定實(shí)現(xiàn)方法,實(shí)例分析了jQuery中bind與unbind方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04jQuery滾動(dòng)新聞實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jQuery滾動(dòng)新聞實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06jQuery實(shí)現(xiàn)兩款有動(dòng)畫功能的導(dǎo)航菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)兩款有動(dòng)畫功能的導(dǎo)航菜單代碼,涉及jQuery動(dòng)畫效果的不同實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09JQuery在循環(huán)中綁定事件的問(wèn)題詳解
下面小編就為大家?guī)?lái)一篇JQuery在循環(huán)中綁定事件的問(wèn)題詳解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06jQuery UI Datepicker length為空或不是對(duì)象錯(cuò)誤的解決方法
jQuery UI Datepicker length為空或不是對(duì)象錯(cuò)誤的解決方法,需要的朋友可以參考下。2010-12-12