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

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

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

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

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

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

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

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

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

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

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

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

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

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

//創(chuàng)建promise的實(shí)例
let promise = new Promise((resolve,reject)=>{
    //剛創(chuàng)建實(shí)例時(shí)的狀態(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ù)是兩個(gè)函數(shù)，第一個(gè)用于處理操作成功后的業(yè)務(wù)，第二個(gè)用于處理操作失敗后的業(yè)務(wù)。

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

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

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

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

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

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

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

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

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

Promise.all()

代碼說明：

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

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

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

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

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

Promise.race()

代碼說明：

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

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

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

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


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


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


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


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

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

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

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

結(jié)果如下：

實(shí)例

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

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

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

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

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

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