如何使用Promise鏈?zhǔn)秸{(diào)用解決多個(gè)異步回調(diào)的問(wèn)題

小編給大家分享一下如何使用Promise鏈?zhǔn)秸{(diào)用解決多個(gè)異步回調(diào)的問(wèn)題，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

介紹

所謂Promise，簡(jiǎn)單來(lái)說(shuō)就是一個(gè)容器，里面保存著某個(gè)未來(lái)才會(huì)結(jié)束的事件（通常是一個(gè)異步操作）的結(jié)果。

缺少場(chǎng)景支撐，對(duì)于新手而言，很難理解Promise的意義。

在《你不知道的JavaScript中》有個(gè)場(chǎng)景介紹得很形象：

我走到快餐店的柜臺(tái)，點(diǎn)了一個(gè)芝士漢堡。我交給收銀員1.47美元。通過(guò)下訂單并付款，我已經(jīng)發(fā)出了一個(gè)對(duì)某個(gè)值（就是那個(gè)漢堡）的請(qǐng)求。我已經(jīng)啟 動(dòng)了一次交易。

但是，通常我不能馬上就得到這個(gè)漢堡。收銀員會(huì)交給我某個(gè)東西來(lái)代替漢堡：一張帶有 訂單號(hào)的收據(jù)。訂單號(hào)就是一個(gè) IOU（I owe you， 我欠你的）承諾（promise），保證了最 終我會(huì)得到我的漢堡。

所以我得好好保留我的收據(jù)和訂單號(hào)。我知道這代表了我未來(lái)的漢堡，所以不需要擔(dān)心， 只是現(xiàn)在我還是很餓！

在等待的過(guò)程中，我可以做點(diǎn)其他的事情，比如給朋友發(fā)個(gè)短信：“嗨，要來(lái)和我一起吃 午飯嗎？我正要吃芝士漢堡?！?br/>

我已經(jīng)在想著未來(lái)的芝士漢堡了， 盡管現(xiàn)在我還沒(méi)有拿到手。 我的大腦之所以可以這么 做，是因?yàn)樗呀?jīng)把訂單號(hào)當(dāng)作芝士漢堡的占位符了。從本質(zhì)上講，這個(gè)占位符使得這個(gè) 值不再依賴時(shí)間。這是一個(gè)未來(lái)值。

終于， 我聽(tīng)到服務(wù)員在喊“訂單 113” ， 然后愉快地拿著收據(jù)走到柜臺(tái)， 把收據(jù)交給收銀 員，換來(lái)了我的芝士漢堡。

換句話說(shuō)， 一旦我需要的值準(zhǔn)備好了， 我就用我的承諾值（value-promise）換取這個(gè)值 本身。

但是，還可能有另一種結(jié)果。他們叫到了我的訂單號(hào)，但當(dāng)我過(guò)去拿芝士漢堡的時(shí)候，收 銀員滿是歉意地告訴我：“不好意思，芝士漢堡賣(mài)完了?！背俗鳛轭櫩蛯?duì)這種情況感到憤 怒之外，我們還可以看到未來(lái)值的一個(gè)重要特性：它可能成功，也可能失敗。

每次點(diǎn)芝士漢堡，我都知道最終要么得到一個(gè)芝士漢堡，要么得到一個(gè)漢堡包售罄的壞消息，那我就得找點(diǎn)別的當(dāng)午飯了。

所以Promise的出現(xiàn)其實(shí)是作為異步編程的一種解決方案。比傳統(tǒng)的解決方案-回調(diào)函數(shù)和事件-更加合理、強(qiáng)大。

Promise的基本用法

var p1 = new Promise((resolve, reject) => {
 setTimeout(resolve, 1000, 'done');
 })
p1.then(data=>{
 console.log(data); // done
})

Promise一個(gè)明顯的好處便是可以用來(lái)解決回調(diào)地獄。特別是在處理多個(gè)回調(diào)相互依賴的情況。

使用Promise解決多個(gè)異步依賴調(diào)用

Promise提供了一個(gè)方法Promise.all([p1,p2,p3]) ，用于將多個(gè)Promise實(shí)例，包裝成一個(gè)新的Promise實(shí)例。接收的參數(shù)是一個(gè)數(shù)組,p1、p2、p3都是Promise對(duì)象。

此時(shí)Promise.all的狀態(tài)取決于它的參數(shù)。

分兩種情況：

• p1、p2、p3的狀態(tài)都是resolve的時(shí)候，Promise.all的狀態(tài)才會(huì)變成resolve；

• 只要p1、p2、p3中有一個(gè)的狀態(tài)為reject，那么Promise.all的狀態(tài)就會(huì)變成reject；
  

所以我們可以用Promise.all()來(lái)解決多個(gè)異步依賴調(diào)用。

比如我們平常經(jīng)常遇到的一種情況：

網(wǎng)站中需要先獲取用戶名，然后再根據(jù)用戶名去獲取用戶信息。這里獲取用戶名getUserName()和獲取用戶信息getUser()都是調(diào)用接口的異步請(qǐng)求。在獲取用戶信息之前，需要先獲得用戶名。也就是說(shuō)getUser依賴于getUserName的狀態(tài)。所以我們可以將這兩個(gè)請(qǐng)求通過(guò)Promise.all()封裝成一個(gè)新的Promise對(duì)象。

function getUserPromise(promiseX, promiseY){
 return Promise.all([promiseX, promiseY])
 .then(values =>
 // 返回的values由 promiseX 與 promiseY返回的值所構(gòu)成的數(shù)組。
  values
 )
}
function getUserName(){
 let data = 'superman';
 return new Promise((resolve, reject) => {
  setTimeout(resolve(data), 1000);
 })
}
function getUser(){
 let data = {
 id:1,
 username: 'superman',
 gender: 'male'
 }
 return new Promise((resolve, reject) => {
 setTimeout(resolve(data), 2000);
 })
}
getUserPromise(getUserName(), getUser())
.then(data => {
 // 這里的data就是包含了getUserName 和 getUser返回值所組成的數(shù)組
 console.log(data); // [ 'superman', { id: 1, username: 'superman', gender: 'male' } ]
 })

使用Promise的鏈?zhǔn)秸{(diào)用

function getUserName(){
 let data = 'superman';
 return new Promise((resolve, reject) => {
 setTimeout(resolve(data), 4000);
 })
}
function getUser(username){
 let data = {
 id:1,
 username: 'superman',
 gender: 'male'
 }
 return new Promise((resolve, reject) => {
 if(username){
  setTimeout(resolve(data), 2000);
 }
 else{
  reject('err');
 }
 })
}
getUserName().then(username => {
 return getUser();
})
.then(user => {
 console.log(user);
})
.catch(err => {
 console.log(err);
})

有了Promise的鏈?zhǔn)秸{(diào)用，再也不同擔(dān)心回調(diào)地獄的問(wèn)題了。

看完了這篇文章，相信你對(duì)“如何使用Promise鏈?zhǔn)秸{(diào)用解決多個(gè)異步回調(diào)的問(wèn)題”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！