摘要：異步模式編程有四種方法回調(diào)函數(shù)最基本的方法，把寫成的回調(diào)函數(shù)事件監(jiān)聽為綁定事件，當(dāng)發(fā)生某個事件，就執(zhí)行發(fā)布訂閱，以及本文要介紹的對象。它的思想是，每一個異步任務(wù)返回一個對象，該對象有一個方法，允許指定回調(diào)函數(shù)。

歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實踐干貨哦~

本文由前端林子發(fā)表于云+社區(qū)專欄

Promise是CommonJS提出的一種規(guī)范，在ES6中已經(jīng)原生支持Promise對象，非ES6環(huán)境可以用Bluebird等庫來支持。

在js中任務(wù)的執(zhí)行模型有兩種：同步模式和異步模式。

同步模式：后一個任務(wù)B等待前一個任務(wù)A結(jié)束后，再執(zhí)行。任務(wù)的執(zhí)行順序和任務(wù)的排序順序是一致的。

異步模式：每一個任務(wù)有一個或多個回調(diào)函數(shù)，前一個任務(wù)A結(jié)束后，不是執(zhí)行后一個任務(wù)B，而是執(zhí)行任務(wù)A的回調(diào)函數(shù)。而后一個任務(wù)B是不等任務(wù)A結(jié)束就執(zhí)行。任務(wù)的執(zhí)行順序，與任務(wù)的排序順序不一致。

異步模式編程有四種方法：回調(diào)函數(shù)（最基本的方法，把B寫成A的回調(diào)函數(shù)）、事件監(jiān)聽（為A綁定事件，當(dāng)A發(fā)生某個事件，就執(zhí)行B）、發(fā)布/訂閱，以及本文要介紹的Promise對象。

Promise是一個用于處理異步操作的對象，可以將回調(diào)函數(shù)寫成鏈?zhǔn)秸{(diào)用的寫法，讓代碼更優(yōu)雅、流程更加清晰，讓我們可以更合理、更規(guī)范地進行異步處理操作。它的思想是，每一個異步任務(wù)返回一個Promise對象，該對象有一個then方法，允許指定回調(diào)函數(shù)。

Pending：進行中，剛創(chuàng)建一個Promise實例時，表示初始狀態(tài)；

resolved(fulfilled)：resolve方法調(diào)用的時候，表示操作成功，已經(jīng)完成；

Rejected：reject方法調(diào)用的時候，表示操作失??；

這三種狀態(tài)只能從pendeng-->resolved(fulfilled)，或者pending-->rejected，不能逆向轉(zhuǎn)換，也不能在resolved(fulfilled)和rejected之間轉(zhuǎn)換。并且一旦狀態(tài)改變，就不會再改變，會一直保持這個結(jié)果。

匯總上述，創(chuàng)建一個Promise的實例是這樣的：

//創(chuàng)建promise的實例
let promise = new Promise((resolve,reject)=>{
    //剛創(chuàng)建實例時的狀態(tài)：pending

    if("異步操作成功"){
        //調(diào)用resolve方法，狀態(tài)從pending變?yōu)閒ulfilled
        resolve();
    }else{
        //調(diào)用reject方法，狀態(tài)從pending變?yōu)閞ejected
        reject();
    }
});

用于綁定處理操作后的處理程序，分別指定fulfilled狀態(tài)和rejected狀態(tài)的回調(diào)函數(shù)，即它的參數(shù)是兩個函數(shù)，第一個用于處理操作成功后的業(yè)務(wù)，第二個用于處理操作失敗后的業(yè)務(wù)。

//then()
promise.then((res)=> {
    //處理操作成功后的業(yè)務(wù)（即Promise對象的狀態(tài)變?yōu)閒ullfilled時調(diào)用）
},(error)=> {
    //處理操作失敗后的業(yè)務(wù)（即Promise對象的狀態(tài)變?yōu)閞ejected時調(diào)用）
});

用于處理操作異常的程序，catch()只接受一個參數(shù)

//catch()
promise.catch((error)=> {
    //處理操作失敗后的業(yè)務(wù)
});

一般來說，建議不要在then()里面定義rejected狀態(tài)的回調(diào)函數(shù)，而是將then()用于處理操作成功，將catch()用于處理操作異常。因為這樣做可以捕獲then()執(zhí)行中的錯誤，也更接近同步中try/catch的寫法：

//try-catch
// bad
promise.then((res)=> {
    //處理操作成功后的業(yè)務(wù)
  }, (error)=> {
    //處理操作失敗后的業(yè)務(wù)
  });

// good
promise
  .then((res)=> { 
    //處理操作成功后的業(yè)務(wù)
  })
  .catch((error)=> {
    //處理操作失敗后的業(yè)務(wù)
  });

接受一個數(shù)組作為參數(shù)，數(shù)組的元素是Promise實例對象。只有當(dāng)參數(shù)中的實例對象的狀態(tài)都為fulfilled時，Promise.all( )才會有返回。

實例代碼（可直接在瀏覽器中打開）：

結(jié)果（注意看時間）：

Promise.all()

代碼說明：

1s后，promise2進入fulfilled狀態(tài)，間隔2s，也就是3s后，promise1也進入fulfilled狀態(tài)。這時，由于兩個實例都進入了fulfilled狀態(tài)，所以Promise.all()才進入了then方法。

使用場景：執(zhí)行某個操作需要依賴多個接口請求回的數(shù)據(jù)，且這些接口之間不存在互相依賴的關(guān)系。這時使用Promise.all()，等到所有接口都請求成功了，它才會進行操作。

和all()的參數(shù)一樣，參數(shù)中的promise實例，只要有一個狀態(tài)發(fā)生變化（不管是成功fulfilled還是異常rejected），它就會有返回，其他實例中再發(fā)生變化，它也不管了。

實例代碼（可直接在瀏覽器中打開）：

結(jié)果（注意看時間）：

Promise.race()

代碼說明：

1s后，promise2進入rejected狀態(tài)，由于一個實例的狀態(tài)發(fā)生了變化，所以Promise.race()就立刻執(zhí)行了。

平時開發(fā)中可能經(jīng)常會遇到的問題是，要用ajax進行多次請求。例如現(xiàn)在有三個請求，請求A、請求B、請求C。請求C要將請求B的請求回來的數(shù)據(jù)做為參數(shù)，請求B要將請求A的請求回來的數(shù)據(jù)做為參數(shù)。

按照這個思路，我們可能會直接寫出這樣的層層嵌套的代碼：

//------請求A 開始---------
    $.ajax({
        success:function(res1){


            //------請求B 開始----
            $.ajax({
                success:function(res2){


                    //----請求C 開始---
                    $.ajax({
                        success:function(res3){
                        }
                    });
                    //---請求C 結(jié)束---


                }    
            });
            //------請求B 結(jié)束-----


        }
    });
    //------請求A 結(jié)束---------

在請求A的success后，請求B發(fā)送請求，在請求B 的success后，請求C發(fā)送請求。請求C結(jié)束后，再向上到請求B結(jié)束，請求B結(jié)束后，再向上到請求A結(jié)束。

這樣雖然可以完成任務(wù)，但是代碼層層嵌套，代碼可讀性差，也不便于調(diào)試和后續(xù)的代碼維護。而如果用Promise，你可以這樣寫（示意代碼，無ajax請求）：

此處附上完整可執(zhí)行代碼，可在瀏覽器的控制臺中查看執(zhí)行結(jié)果：

結(jié)果如下：

實例

可以看出請求C依賴請求B的結(jié)果，請求B依賴請求A的結(jié)果，在請求A中是使用了return將需要的數(shù)據(jù)返回，傳遞給下一個then()中的請求B，實現(xiàn)了參數(shù)的傳遞。同理，請求B中也是用了return，將參數(shù)傳遞給了請求C。

本文主要介紹了Promise對象的三個狀態(tài)和兩個過程。“三個狀態(tài)”是：初始化、操作成功、操作異常，“兩個過程”是初始化狀態(tài)到操作成功狀態(tài)，和初始化狀態(tài)到操作異常狀態(tài)。除此之前，還有兩種實例方法：then()、catch()來綁定處理程序。類方法：Promise.all()、Promise.race()。如有問題，歡迎指正。

相關(guān)閱讀
【每日課程推薦】機器學(xué)習(xí)實戰(zhàn)！快速入門在線廣告業(yè)務(wù)及CTR相應(yīng)知識

此文已由作者授權(quán)騰訊云+社區(qū)發(fā)布，更多原文請點擊

搜索關(guān)注公眾號「云加社區(qū)」，第一時間獲取技術(shù)干貨，關(guān)注后回復(fù)1024 送你一份技術(shù)課程大禮包！

海量技術(shù)實踐經(jīng)驗，盡在云加社區(qū)！