溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
閱讀目錄
最近在看《你不知道的javascript中卷》，發(fā)覺作者花了基本一半的篇幅去講異步和promise，覺得有必要總結(jié)一下。
其實(shí)本文的目的是想手寫一個(gè)Promise的，無奈總結(jié)著總結(jié)著發(fā)覺篇幅有點(diǎn)長，因此只好一分為二，先介紹promise的用法，知道怎么用，我們才知道怎么寫，所以把手寫一個(gè)promise的任務(wù)放到了下一篇文章當(dāng)中。
當(dāng)然，網(wǎng)上有很多關(guān)于promise的文章，都可以參考參考，有誤之處，歡迎之處。
什么是Prmoise
promise是ES6新增的一個(gè)特征，它已被列入ES6的正式規(guī)范中
Promise對象可以理解為一次執(zhí)行的異步操作，使用promise對象之后可以使用一種鏈?zhǔn)秸{(diào)用的方式來組織代碼；讓代碼更加的直觀。也就是說，有了Promise對象，就可以將異步操作以同步的操作的流程表達(dá)出來，避免了層層嵌套的回調(diào)函數(shù)。
示例：未使用promise，回調(diào)必須層層嵌套
$.ajax(url1, function(data1){
// do something...
$.ajax(url2, function(data2){
// do something...
$.ajax(url3, function(data3){
// do something...
done(data3); // 返回?cái)?shù)據(jù)
})
});
});
如果有多個(gè)嵌套，導(dǎo)致代碼不夠直觀，而且如果幾個(gè)操作之前沒有前后順序之分，需要等待上一個(gè)操作完成才可以進(jìn)行下一個(gè)操作，造成不必要的等待
promise就是為了解決這些問題而產(chǎn)生的。
Promise對象的特點(diǎn)：
1、對象的狀態(tài)不受外界影響。
Promise對象代表一個(gè)異步操作，有三種狀態(tài)
其中pending為初始狀態(tài)，fulfilled和rejected為結(jié)束狀態(tài)（結(jié)束狀態(tài)表示promise的生命周期已結(jié)束）。
promise只有異步操作的結(jié)果，可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都無法改變這個(gè)狀態(tài).。
2、一旦狀態(tài)改變，就不會(huì)再變，任何時(shí)候都可以得到這個(gè)結(jié)果。
Promise對象的狀態(tài)改變，只有兩種可能：從Pending變?yōu)镽esolved和從Pending變?yōu)镽ejected
pending->fulfilled，pending->rejected。
只要這兩種情況發(fā)生，狀態(tài)就凝固了，不會(huì)再變了，會(huì)一直保持這個(gè)結(jié)果
Promise對象的缺點(diǎn)：
1、無法取消Promise，一旦新建它就會(huì)立即執(zhí)行，無法中途取消。
2、如果不設(shè)置回調(diào)函數(shù)，Promise內(nèi)部拋出的錯(cuò)誤，不會(huì)反應(yīng)到外部。
3、當(dāng)處于Pending狀態(tài)時(shí)，無法得知目前進(jìn)展到哪一個(gè)階段（剛剛開始還是即將完成）。
promise兼容性
除了IE這種古老的瀏覽器和一些低版本的安卓外，現(xiàn)代瀏覽器支持還是挺好的，所以我們可以在谷歌的控制臺(tái)直接測試我們的代碼
Promise的使用
先提前說明一下，下面的代碼示例，都可以復(fù)制到谷歌的控制臺(tái)就行測試！！
1、基本用法：
（1）、首先我們new一個(gè)Promise,將Promise實(shí)例化
（2）、然后在實(shí)例化的promise可以傳兩個(gè)參數(shù)，一個(gè)是成功之后的resolve，一個(gè)是失敗之后的reject
（3）、Promise實(shí)例生成以后，可以用then方法分別指定Resolved狀態(tài)和Reject狀態(tài)的回調(diào)函數(shù)
代碼如下：
var promise = function(isReady){
return new Promise(function(resolve, reject){
// do somthing, maybe async
if (isReady){
return resolve('hello world');
} else {
return reject('failure');
}
});
}
//Promise實(shí)例生成以后，可以用then方法分別指定Resolved狀態(tài)和Reject狀態(tài)的回調(diào)函數(shù)。
promise(true).then(function(value){
// success,這里是resolve的回調(diào)函數(shù)
console.log(value); //hello world
}, function(err){
// failure，這里是reject的回調(diào)函數(shù)
console.log(err)
})
上述代碼是執(zhí)行成功，返回hello world,如果想測試一下失敗后的返回值，可以在promise(true).then...這里改為 promise(false).then...即可
2、鏈?zhǔn)讲僮?/strong>
也許你會(huì)說，Promise只是簡化層層回調(diào)的寫法而已吧，其實(shí)不然，它的精髓是通過維護(hù)狀態(tài)、傳遞狀態(tài)的方式來使回調(diào)方式能夠及時(shí)的調(diào)用，因此，相比于callback，它更靈活，更簡單。下面我們來看看Promise的鏈?zhǔn)讲僮鳎?/p>
makePromise1()
.then(function(value){
console.log(value);
return makePromise2();
})
.then(function(value){
console.log(value);
return makePromise3();
})
.then(function(value){
console.log(value);
});
function makePromise1(){
var p = new Promise(function(resolve, reject){
//異步操作
setTimeout(function(){
console.log('異步任務(wù)1');
resolve('異步任務(wù)1傳過來的值');
}, 2000);
});
return p;
}
function makePromise2(){
var p = new Promise(function(resolve, reject){
//異步操作
setTimeout(function(){
console.log('異步任務(wù)2');
resolve('異步任務(wù)2傳過來的值');
}, 2000);
});
return p;
}
function makePromise3(){
var p = new Promise(function(resolve, reject){
//異步操作
setTimeout(function(){
console.log('異步任務(wù)3');
resolve('異步任務(wù)3傳過來的值');
}, 2000);
});
return p;
}
上面的代碼中，我們有三個(gè)異步操作，makePromise1,makePromise2,makePromise3。其中第二個(gè)和第三個(gè)依次執(zhí)行，也就是上一個(gè)操作完成之后才可以進(jìn)行。
輸出的值為：
異步任務(wù)1 異步任務(wù)1傳過來的值 異步任務(wù)2 異步任務(wù)2傳過來的值 異步任務(wù)3 異步任務(wù)3傳過來的值
3、Promise的catch方法
var promise = function(isReady){
return new Promise(function(resolve, reject){
// do somthing, maybe async
if (isReady){
return resolve('hello world');
} else {
return reject('failure');
}
});
}
promise(true)
.then(function(value){
console.log('resolved');
console.log(value);
console.log(haha); //此處的haha未定義
})
.catch(function(error){
console.log('rejected');
console.log(error);
});
catch 方法是 then(onFulfilled, onRejected) 方法當(dāng)中 onRejected 函數(shù)的一個(gè)簡單的寫法，也就是說可以寫成 then(fn).catch(fn),相當(dāng)于 then(fn).then(null, fn)
使用 catch 的寫法比一般的寫法更加清晰明確，其實(shí)可以類比成try/catch，這樣，其中有報(bào)錯(cuò)的地方不會(huì)阻塞運(yùn)行。比如定義了一個(gè)未定義haha,正常來說它上面的代碼也不會(huì)運(yùn)行，因?yàn)楸贿@個(gè)報(bào)錯(cuò)阻塞了，有了catch,它上面的代碼可以正常運(yùn)行下去：
控制臺(tái)打印出來的東西：
resolved hello world rejected ReferenceError: haha is not defined(…)
4、promise.all方法
Promise.all 可以接收一個(gè)元素為 Promise 對象的數(shù)組作為參數(shù)，當(dāng)這個(gè)數(shù)組里面所有的 Promise 對象都變?yōu)?resolve 時(shí)，該方法才會(huì)返回。
代碼示例：
var p1 = new Promise(function (resolve) {
setTimeout(function () {
resolve("第一個(gè)promise");
}, 3000);
});
var p2 = new Promise(function (resolve) {
setTimeout(function () {
resolve("第二個(gè)promise");
}, 1000);
});
Promise.all([p1, p2]).then(function (result) {
console.log(result); // ["第一個(gè)promise", "第二個(gè)promise"]
});
上面的代碼中，all接收一個(gè)數(shù)組作為參數(shù)，p1,p2是并行執(zhí)行的，等兩個(gè)都執(zhí)行完了，才會(huì)進(jìn)入到then，all會(huì)把所有的結(jié)果放到一個(gè)數(shù)組中返回，所以我們打印出我們的結(jié)果為一個(gè)數(shù)組。
值得注意的是，雖然p2的執(zhí)行順序比p1快，但是all會(huì)按照參數(shù)里面的數(shù)組順序來返回結(jié)果。all的使用場景類似于，玩游戲的時(shí)候，需要提前將游戲需要的資源提前準(zhǔn)備好，才進(jìn)行頁面的初始化。
5、promise.race方法
race的中文意思為賽跑，也就是說，看誰跑的快，跑的快的就贏了。因此，promise.race也是傳入一個(gè)數(shù)組，但是與promise.all不同的是，race只返回跑的快的值，也就是說result返回比較快執(zhí)行的那個(gè)。
var p1 = new Promise(function (resolve) {
setTimeout(function () {
console.log(1);
resolve("第一個(gè)promise");
}, 3000);
});
var p2 = new Promise(function (resolve) {
setTimeout(function () {
console.log(2);
resolve("第二個(gè)promise");
}, 1000);
});
Promise.race([p1, p2]).then(function (result) {
console.log(result);
});
// 結(jié)果：
// 2
// 第二個(gè)promise
// 1
可以看到，傳的值中，只有p2的返回了，但是p1沒有停止，依然有執(zhí)行。
race的應(yīng)用場景為，比如我們可以設(shè)置為網(wǎng)路請求超時(shí)。寫兩個(gè)promise，如果在一定的時(shí)間內(nèi)如果成功的那個(gè)我們沒有執(zhí)行到，我們就執(zhí)行失敗的那個(gè)，這里不再舉例子，可以看看阮一峰的ES入門。
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持億速云！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼