介紹

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

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

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

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

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

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

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

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

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

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

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

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

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

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的鏈式調(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的鏈式調(diào)用，再也不同擔心回調(diào)地獄的問題了。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

最新評論