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

創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供麻陽網(wǎng)站建設(shè)、麻陽做網(wǎng)站、麻陽網(wǎng)站設(shè)計、麻陽網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、麻陽企業(yè)網(wǎng)站模板建站服務(wù)，10年麻陽做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

介紹

所謂Promise，簡單來說就是一個容器，里面保存著某個未來才會結(jié)束的事件（通常是一個異步操作）的結(jié)果。

缺少場景支撐，對于新手而言，很難理解Promise的意義。

在《你不知道的JavaScript中》有個場景介紹得很形象：

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

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

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

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

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

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

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

但是，還可能有另一種結(jié)果。他們叫到了我的訂單號，但當(dāng)我過去拿芝士漢堡的時候，收 銀員滿是歉意地告訴我：“不好意思，芝士漢堡賣完了。”除了作為顧客對這種情況感到憤 怒之外，我們還可以看到未來值的一個重要特性：它可能成功，也可能失敗。

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

所以Promise的出現(xiàn)其實是作為異步編程的一種解決方案。比傳統(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一個明顯的好處便是可以用來解決回調(diào)地獄。特別是在處理多個回調(diào)相互依賴的情況。

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

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

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

分兩種情況：

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

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

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

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

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

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)地獄的問題了。

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

文章標(biāo)題：如何使用Promise鏈?zhǔn)秸{(diào)用解決多個異步回調(diào)的問題
當(dāng)前網(wǎng)址：http://aaarwkj.com/article20/pegsco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、面包屑導(dǎo)航、網(wǎng)站導(dǎo)航、移動網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)