Promise是什么般卑?
Promise 是 ES6 中異步編程的一種解決方案爽雄。從語(yǔ)法上講,Promise 是一個(gè)對(duì)象挚瘟,從它可以獲取異步操作的消息;從本意上講本慕,它是承諾,承諾它過(guò)一段時(shí)間會(huì)給你一個(gè)結(jié)果锅尘。 Promise 有三種狀態(tài):pending
(等待態(tài))布蔗,fullfilled
(resolved
成功態(tài)),rejected
(失敗態(tài))纵揍;狀態(tài)一旦改變,就不會(huì)再變璧榄。創(chuàng)造 Promise 實(shí)例后吧雹,它會(huì)立即執(zhí)行。
Promise用來(lái)做什么雄卷?
Promise 是用來(lái)解決兩個(gè)問(wèn)題的:
回調(diào)地獄
:回調(diào)嵌套非常多,代碼難以維護(hù)妒潭, 常常第一個(gè)的函數(shù)的輸出是第二個(gè)函數(shù)的輸入這種現(xiàn)象。
Promise 可以支持多個(gè)并發(fā)的請(qǐng)求雳灾,獲取并發(fā)請(qǐng)求中的數(shù)據(jù)。
Promise如何使用记靡?
Promise 是一個(gè)構(gòu)造函數(shù)团驱,自己身上有all摸吠、reject嚎花、resolve方法,原型上有then啼止、catch等方法兵罢。
let p = new Promise((resolve, reject) => {
//做一些異步操作
setTimeout(() => {
console.log('執(zhí)行完成');
resolve('我是成功!卖词!');
}, 2000);
});
Promise 的構(gòu)造函數(shù)接收一個(gè)參數(shù):函數(shù),并且這個(gè)函數(shù)需要傳入兩個(gè)參數(shù):
resolve
:異步操作執(zhí)行成功后的回調(diào)函數(shù)
reject
:異步操作執(zhí)行失敗后的回調(diào)函數(shù)
then 鏈?zhǔn)讲僮鞯挠梅?/code>
從表面上看即横,Promise 只是簡(jiǎn)化層層回調(diào)的寫(xiě)法,而實(shí)質(zhì)上东囚,Promise的精髓是“狀態(tài)”,用維護(hù)狀態(tài)页藻、傳遞狀態(tài)的方式來(lái)使得回調(diào)函數(shù)能夠及時(shí)調(diào)用植兰,它比傳遞callback函數(shù)要簡(jiǎn)單、靈活的多钉跷。所以使用Promise的正確場(chǎng)景是這樣的。
p.then((data) => {
console.log(data);
})
.then((data) => {
console.log(data);
})
.then((data) => {
console.log(data);
});復(fù)制代碼
reject的用法
把 Promise 的狀態(tài)置為 rejected彬坏,這樣我們?cè)?then 中就能捕捉到膝晾,然后執(zhí)行“失敗”情況的回調(diào)⊙保看下面的代碼。
let p = new Promise((resolve, reject) => {
//做一些異步操作
setTimeout(function(){
var num = Math.ceil(Math.random()*10); //生成1-10的隨機(jī)數(shù)
if(num<=5){
resolve(num);
}
else{
reject('數(shù)字太大了');
}
}, 2000);
});
p.then((data) => {
console.log('resolved',data);
},(err) => {
console.log('rejected',err);
}
);
then 中傳了兩個(gè)參數(shù)落恼,then方法可以接受兩個(gè)參數(shù)离熏,第一個(gè)對(duì)應(yīng)resolve 的回調(diào),第二個(gè)對(duì)應(yīng) reject 的回調(diào)滋戳。所以我們能夠分別拿到他們傳過(guò)來(lái)的數(shù)據(jù)。
catch的用法
Promise 對(duì)象除了 then 方法咪笑,還有一個(gè) catch 方法娄涩,用來(lái)指定 reject 的回調(diào)。用法是這樣:
p.then((data) => {
console.log('resolved',data);
}).catch((err) => {
console.log('rejected',err);
});
效果和寫(xiě)在 then 的第二個(gè)參數(shù)里面一樣蓄拣。不過(guò)它還有另外一個(gè)作用:在執(zhí)行 resolve 的回調(diào)(也就是上面 then 中的第一個(gè)參數(shù))時(shí),如果拋出異常了(代碼出錯(cuò)了)孔轴,那么并不會(huì)報(bào)錯(cuò)卡死 js 碎捺,而是會(huì)進(jìn)到這個(gè) catch 方法中。請(qǐng)看下面的代碼
p.then((data) => {
console.log('resolved',data);
console.log(somedata); //此處的somedata未定義
})
.catch((err) => {
console.log('rejected',err);
});
在 resolve 的回調(diào)中收厨,console.log(somedata),而 somedata 這個(gè)變量是沒(méi)有被定義的雁竞。如果我們不用 Promise ,代碼運(yùn)行到這里就直接在控制臺(tái)報(bào)錯(cuò)了碑诉,不往下運(yùn)行了。
all 的用法
誰(shuí)跑的慢德挣,以誰(shuí)為準(zhǔn)執(zhí)行回調(diào)快毛。all 接收一個(gè)數(shù)組參數(shù),里面的值最終都算返回 Promise 對(duì)象唠帝。
Promise 的 all 方法提供了并行執(zhí)行異步操作的能力,并且在所有異步操作執(zhí)行完后才執(zhí)行回調(diào)襟衰。看下面的例子:
let Promise1 = new Promise(function(resolve, reject){})
let Promise2 = new Promise(function(resolve, reject){})
let Promise3 = new Promise(function(resolve, reject){})
let p = Promise.all([Promise1, Promise2, Promise3])
p.then(funciton(){
// 三個(gè)都成功則成功
}, function(){
// 只要有失敗阀湿,則失敗
})
有了 all 瑰妄,就可以并行執(zhí)行多個(gè)異步操作,并且在一個(gè)回調(diào)中處理所有的返回?cái)?shù)據(jù)间坐。一些游戲類的素材比較多的應(yīng)用,打開(kāi)網(wǎng)頁(yè)時(shí)劳澄,預(yù)先加載需要用到的各種資源如圖片蜈七、flash以及各種靜態(tài)文件。所有的都加載完后飒硅,我們?cè)龠M(jìn)行頁(yè)面的初始化。
race 的用法
誰(shuí)跑的快庵芭,以誰(shuí)為準(zhǔn)執(zhí)行回調(diào)雀监。
race 的使用場(chǎng)景:可以用 race 給某個(gè)異步請(qǐng)求設(shè)置超時(shí)時(shí)間,并且在超時(shí)后執(zhí)行相應(yīng)的操作好乐,代碼如下
//請(qǐng)求某個(gè)圖片資源
function requestImg(){
var p = new Promise((resolve, reject) => {
var img = new Image();
img.onload = function(){
resolve(img);
}
img.src = '圖片的路徑';
});
return p;
}
//延時(shí)函數(shù)曹宴,用于給請(qǐng)求計(jì)時(shí)
function timeout(){
var p = new Promise((resolve, reject) => {
setTimeout(() => {
reject('圖片請(qǐng)求超時(shí)');
}, 5000);
});
return p;
}
Promise.race([requestImg(), timeout()]).then((data) =>{
console.log(data);
}).catch((err) => {
console.log(err);
});
requestImg 函數(shù)會(huì)異步請(qǐng)求一張圖片歉提,我把地址寫(xiě)為"圖片的路徑",所以肯定是無(wú)法成功請(qǐng)求到的苔巨。timeout 函數(shù)是一個(gè)延時(shí)5秒的異步操作。我們把這兩個(gè)返回 Promise 對(duì)象的函數(shù)放進(jìn) race礁芦,于是他倆就會(huì)賽跑悼尾,如果5秒之內(nèi)圖片請(qǐng)求成功了,那么遍進(jìn)入 then 方法闺魏,執(zhí)行正常的流程。如果5秒鐘圖片還未成功返回析桥,那么 timeout 就跑贏了,則進(jìn)入 catch埋虹,報(bào)出“圖片請(qǐng)求超時(shí)”的信息娩怎。