這次聊聊Promise對象

Eminjannn 發布于2019-08-23 12:54 / 1904人閱讀

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

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

本文由前端林子發表于云+社區專欄

Promise是CommonJS提出的一種規范，在ES6中已經原生支持Promise對象，非ES6環境可以用Bluebird等庫來支持。

0.引入

在js中任務的執行模型有兩種：同步模式和異步模式。

同步模式：后一個任務B等待前一個任務A結束后，再執行。任務的執行順序和任務的排序順序是一致的。

異步模式：每一個任務有一個或多個回調函數，前一個任務A結束后，不是執行后一個任務B，而是執行任務A的回調函數。而后一個任務B是不等任務A結束就執行。任務的執行順序，與任務的排序順序不一致。

異步模式編程有四種方法：回調函數（最基本的方法，把B寫成A的回調函數）、事件監聽（為A綁定事件，當A發生某個事件，就執行B）、發布/訂閱，以及本文要介紹的Promise對象。

Promise是一個用于處理異步操作的對象，可以將回調函數寫成鏈式調用的寫法，讓代碼更優雅、流程更加清晰，讓我們可以更合理、更規范地進行異步處理操作。它的思想是，每一個異步任務返回一個Promise對象，該對象有一個then方法，允許指定回調函數。

1.Promise的基本知識 1.1 三種狀態

Pending：進行中，剛創建一個Promise實例時，表示初始狀態；

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

Rejected：reject方法調用的時候，表示操作失敗；

1.2 兩個過程

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

匯總上述，創建一個Promise的實例是這樣的：

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

    if("異步操作成功"){
        //調用resolve方法，狀態從pending變為fulfilled
        resolve();
    }else{
        //調用reject方法，狀態從pending變為rejected
        reject();
    }
});

1.3 then()

用于綁定處理操作后的處理程序，分別指定fulfilled狀態和rejected狀態的回調函數，即它的參數是兩個函數，第一個用于處理操作成功后的業務，第二個用于處理操作失敗后的業務。

//then()
promise.then((res)=> {
    //處理操作成功后的業務（即Promise對象的狀態變為fullfilled時調用）
},(error)=> {
    //處理操作失敗后的業務（即Promise對象的狀態變為rejected時調用）
});

1.4 catch()

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

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

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

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

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

1.5 all()

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

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





    
    Promise實例

結果（注意看時間）：

Promise.all()

代碼說明：

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

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

1.6 race()

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

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





    
    Promise實例

結果（注意看時間）：

Promise.race()

代碼說明：

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

2 實例

平時開發中可能經常會遇到的問題是，要用ajax進行多次請求。例如現在有三個請求，請求A、請求B、請求C。請求C要將請求B的請求回來的數據做為參數，請求B要將請求A的請求回來的數據做為參數。

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

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


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


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


                }    
            });
            //------請求B 結束-----


        }
    });
    //------請求A 結束---------

在請求A的success后，請求B發送請求，在請求B 的success后，請求C發送請求。請求C結束后，再向上到請求B結束，請求B結束后，再向上到請求A結束。

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

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





    
    Promise實例

結果如下：

實例

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

3.小結

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

相關閱讀
【每日課程推薦】機器學習實戰！快速入門在線廣告業務及CTR相應知識

此文已由作者授權騰訊云+社區發布，更多原文請點擊

搜索關注公眾號「云加社區」，第一時間獲取技術干貨，關注后回復1024 送你一份技術課程大禮包！

海量技術實踐經驗，盡在云加社區！

云服務器 GPU云服務器聊聊聊聊webrtc網關聊聊webrtc網關服務器 promise

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99081.html

聊聊ES7與ES8特性

摘要：我曾寫過一篇關于博客個最佳特性，這次我打算聊聊和特性。自從年雙十一正式上線，累計處理了億錯誤事件，得到了金山軟件百姓網等眾多知名用戶的認可。譯者按: 轉眼ES6發布2年了，是時候了解一下ES7與ES8特性了！原文: ES7 and ES8 Features 譯者: Fundebug 為了保證可讀性，本文采用意譯而非直譯，并且對源代碼進行了大量修改。另外，本文版權歸原作者所有...

fxp 2019-08-21 16:16 評論0 收藏0
ES6 系列之我們來聊聊 Promise

前言 Promise 的基本使用可以看阮一峰老師的《ECMAScript 6 入門》。我們來聊點其他的。回調說起 Promise，我們一般都會從回調或者回調地獄說起，那么使用回調到底會導致哪些不好的地方呢？ 1. 回調嵌套使用回調，我們很有可能會將業務代碼寫成如下這種形式： doA( function(){ doB(); doC( function(){ ...

MycLambert 2019-08-23 12:23 評論0 收藏0
只為那句承諾-大話Promise

摘要：什么是是異步編程的一種解決方案，比傳統的解決方案回調函數和事件更合理和更強大。函數可以將狀態轉變為狀態。對象通過方法來添加回調函數。當發生錯誤的時候可以通過方法，來定義回調函數。接受數組作為參數傳入，每個元素都是一個對象。大家周末好，要說最近幾年什么語言大紅大紫，當屬JavaScript了。話說雖然是10天就創造出的語言，但是人家能文能武。web前端自然不必多說了，各種框架你方登罷我...

EastWoodYang 2019-08-20 11:56 評論0 收藏0
報錯監控-監控Promise錯誤

摘要：上次我們聊過了前端監控執行錯誤和第三方資源加載異常的監控，那么這次來聊聊如何捕獲錯誤。首先先安利下自己做的報錯監控的項目歡迎和。使用對事件進行監聽即可捕捉到未被的錯誤。上次我們聊過了前端監控 JS 執行錯誤和第三方資源加載異常的監控，那么這次來聊聊如何捕獲 Promise 錯誤。首先先安利下自己做的報錯監控的項目 FE-Monitor 歡迎 issue 和 star 。 Promi...

Jrain 2019-08-26 10:10 評論0 收藏0
只知道ajax？你已經out了

摘要：所以本文將介紹兩個目前常用的獲取服務器數據的庫和。隨著作者尤雨溪發布消息，不再繼續維護并推薦大家使用開始，進入了很多人的目光。脫離了，是基于設計。如果要詳細了解的應用，推薦閱讀教程和規范。歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~ 本文由前端林子發表于云+社區專欄隨著前端技術的發展，請求服務器數據的方法早已不局限于ajax、jQuery的ajax方法。各種js庫已如雨后...

Steven 2019-04-23 13:10 評論0 收藏0