先前了解了ES6的Promise對象，來看看jQuery中的Promise，也就是jQuery的Deferred對象。
打開瀏覽器的控制臺先。
<script> var defer = $.Deferred(); console.log(defer); </script>
運行結果：
和ES6的Promise對象長的有點像，jQuery的Deferred對象也有resolve、reject、then方法，還有done、fail、always......方法。jQuery就是用這個Deferred對象來注冊異步操作的回調函數(shù)，修改并傳遞異步操作的狀態(tài)。
玩玩Deferred：
<script>
function runAsync(){
var defer = $.Deferred();
//做一些異步操作
setTimeout(function(){
console.log('執(zhí)行完成');
defer.resolve('異步請求成功之后返回的數(shù)據');
}, 1000);
return defer;
}
runAsync().then(function(data){
console.log(data)
});
</script>
運行之后，Deferred對象的實例defer通過resolve方法把參數(shù) “異步請求成功之后返回的數(shù)據” 傳回到then方法中進行接收，，打印。
和ES6的Promise相似，但是有一點點區(qū)別，再看下Promise：
<script>
function runAsync(){
var p = new Promise(function(resolve, reject){
setTimeout(function(){
console.log('執(zhí)行完成');
resolve('異步請求成功之后返回的數(shù)據');
}, 1000);
});
return p;
}
runAsync().then(function(data){
console.log(data);
});
</script>
我們發(fā)現(xiàn)：
1、創(chuàng)建Deferred對象的時候沒有傳參；而創(chuàng)建Promise對象的時候，傳了參數(shù)（傳了一個匿名函數(shù)，函數(shù)也有兩個參數(shù)：resolve、reject）；
2、Deferred對象直接調用了resolve方法；而Promise對象則是在內部調用的resolve方法；
說明：Deferred對象本身就有resolve方法，而Promise對象是在構造器中通過執(zhí)行resolve方法，給Promise對象賦上了執(zhí)行結果的狀態(tài)。
這樣就有一個弊端：因為Deferred對象自帶resolve方法，拿到Deferred對象之后，就可以隨時調用resolve方法，其狀態(tài)可以進行手動干預了
<script>
function runAsync(){
var defer = $.Deferred();
//做一些異步操作
setTimeout(function(){
console.log('執(zhí)行完成');
defer.resolve('異步請求成功之后返回的數(shù)據');
}, 1000);
return defer;
}
var der = runAsync();
der.then(function(data){
console.log(data)
});
der.resolve('在外部結束');
</script>
這樣的話就直接在外部直接給Deferred設置了狀態(tài)，打印“在外部結束”，1s后打印“執(zhí)行完成”，不會打印“異步請求成功之后返回的數(shù)據”了。
顯然，這不好。我發(fā)個異步請求，還沒收到數(shù)據就讓人在外部給我結束了。。。。
當然這個坑jQuery肯定會填的，在Deferred對象上有一個promise方法，是一個受限的Deferred對象
<script>
function runAsync(){
var def = $.Deferred();
//做一些異步操作
setTimeout(function(){
console.log('執(zhí)行完成');
def.resolve('請求成功之后返回的數(shù)據');
}, 2000);
return def.promise(); //就在這里調用
}
</script>所謂受限的Deferred對象，就是沒有resolve和reject方法的Deferred對象。這樣就無法在外邊改變Deferred對象的狀態(tài)了。
Deferred對象的then方法和done、fail語法糖
我們知道，在ES6的Promise規(guī)范中，then方法接受兩個參數(shù)，分別是執(zhí)行完成和執(zhí)行失敗的回調，而jquery中進行了增強，還可以接受第三個參數(shù)，就是在pending狀態(tài)時的回調，如下：
deferred.then( doneFilter [, failFilter ] [, progressFilter ] )
then方法：
<script>
function runAsync(){
var def = $.Deferred();
//做一些異步操作
setTimeout(function(){
var num = Math.ceil(Math.random()*10); //生成1-10的隨機數(shù)
if(num<=5){
def.resolve(num);
}
else{
def.reject('數(shù)字太大了');
}
}, 2000);
return def.promise(); //就在這里調用
}
runAsync().then(function(d){
console.log("resolve");
console.log(d);
},function(d){
console.log("reject");
console.log(d);
})
</script>
Deferred對象的then方法也是可以進行鏈式操作的。
done，fail語法糖,分別用來指定執(zhí)行完成和執(zhí)行失敗的回調,與這段代碼是等價的：
<script>
function runAsync(){
var def = $.Deferred();
//做一些異步操作
setTimeout(function(){
var num = Math.ceil(Math.random()*10); //生成1-10的隨機數(shù)
if(num<=5){
def.resolve(num);
}
else{
def.reject('數(shù)字太大了');
}
}, 2000);
return def.promise(); //就在這里調用
}
runAsync().done(function(d){
console.log("resolve");
console.log(d);
}).fail(function(d){
console.log("reject");
console.log(d);
})
</script>
always的用法
jquery的Deferred對象上還有一個always方法，不論執(zhí)行完成還是執(zhí)行失敗，always都會執(zhí)行，有點類似ajax中的complete。
$.when的用法
jquery中，還有一個$.when方法來實現(xiàn)Promise，與ES6中的all方法功能一樣，并行執(zhí)行異步操作，在所有的異步操作執(zhí)行完后才執(zhí)行回調函數(shù)。不過$.when并沒有定義在$.Deferred中，看名字就知道，$.when，它是一個單獨的方法。與ES6的all的參數(shù)稍有區(qū)別，它接受的并不是數(shù)組，而是多個Deferred對象，如下：
<script>
function runAsync(){
var def = $.Deferred();
//做一些異步操作
setTimeout(function(){
var num = Math.ceil(Math.random()*10); //生成1-10的隨機數(shù)
def.resolve(num);
}, 2000);
return def.promise(); //就在這里調用
}
$.when(runAsync(), runAsync(), runAsync()) .then(function(data1, data2, data3){
console.log('全部執(zhí)行完成');
console.log(data1, data2, data3);
});
</script>jquery中沒有像ES6中的race方法嗎？就是以跑的快的為準的那個方法。對的，jquery中沒有。
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2024 51dongshi.com 版權所有
違法及侵權請聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
