好程式設計師web前端培訓分享如何講清楚Promise?

　　好程式設計師web前端培訓分享如何講清楚Promise?此文章主要講解核心思想和基本用法，想要了解更多細節全面的使用方式，請閱讀官方API

　　這篇文章假定你具備最基本的非同步程式設計知識，例如知道什麼是回撥，知道什麼是鏈式呼叫，同時具備最基本的單詞量，例如page、user、promise、then、resovle、reject、pay、fix、order等等，如果你對這些單詞非常陌生，那麼你需要先花點時間補充一下你的英語

　　什麼是非同步操作？

　　所謂非同步操作，指的是可以跟當前程式同時執行的操作。舉例:

　　$("#page").scrolltop(0 ,1000);    //使用1秒鐘時間將頁面滾動至頂部

　　$("#nav-float").hide (1000);    //使用1秒鐘時間將懸浮導航欄隱藏

　　只要你稍微有點非同步程式設計經驗，就應該知道，這兩個方法會同時完成。

　　它們的編寫順序並不會影響它們的執行順序

 

//非同步操作的特點就是，不會打斷當前程式的執行

//getUsers請求發出後，會立刻向下繼續執行第二個請求

ajax("/getUsers",function(data) {

    //回掉函式會在請求成功後呼叫

})

//resumelist請求會立刻開始，無論getUsers是否結束

ajax("/resumelist", function(data) {

 

})

//至於哪一個ajax先返回結果並執行回撥函式，從程式碼的編寫順序上是無法確定的。

我們可以給非同步操作做一個簡單的定義

 

當一個操作開始執行後，主程式無需等待它的完成，可以繼續向下執行。此時該操作可以跟主程式同時（併發）執行。這種操作我們就稱之為非同步操作。 通常當操作完成時，會執行一個我們事先設定好的回撥函式來做後續的處理。

 

我們常見的非同步操作例如：

 

新增定時器 setTimeout/setInterval

執行某個動畫 animate

發起網路請求 request

 

 

非同步會帶來什麼問題？

比如我們現在有兩個動畫，需要按順序來執行，也就是第一個結束，第二個才能開始

這個時候可能有點麻煩，傳統的解決方法是透過回撥：

animateA(function( ){

      animateB( );  

})      

這種方案顯然不太好，如果有很多非同步操作需要順序執行，就會產生所謂的“回撥地獄”

 

ajaxA(function( ){

    ajaxB(function( ){

        ajaxC(function( ){

            ajaxD(function( ){

                ......   

            });

        });

    });

})

 

這種程式碼不管是寫起來還是讀起來都比較煩人。

 

我們來看下經過Promise改造後的樣子（虛擬碼）

 

new Promise(ajaxA)

        .then(ajaxB)

        .then(ajaxC)

        .then(ajaxD);  

 

 

Promise的使用及原理

要熟練Promise的的使用，你必須要先搞懂它解決問題的原理

貼一段實際的Promise程式碼，你來感受一下先：

newPromise(resolve=>{

    ajax("/pay/post", data=>resolve() );

}).then(resolve=>{

    ajax("/order/fix", data=>{

        //處理資料   

    })

})

 

上面的程式碼使用了ES6的箭頭函式,雖然大大簡化了程式碼的寫法，

 

但對於初級程式猿來講極不友好

 

讀這種程式碼簡直跟讀金剛經差不多。

 

我們把程式碼還原成ES5的樣子

 

new Promise(function(resolve){

    ajax("/pay/post",function(data){

        resolve();

    })

}).then(function(){

    ajax("/order/fix",function(data){

 

    })

})

 

接下來，我們就按照費曼技巧來一步步的學習Promise是如何解決問題的

 

問題1, 作為一個非同步函式，尤其像ajax這種網路請求，連我自己都不能確定函式的執行時間，Promise是怎麼知道第一個函式什麼時候結束的？ 然後再開始執行下一個？

Promise並沒有那麼神奇，它並不能知道我們的函式什麼時候結束，

你注意到上面程式碼中的第3行了嗎

在ajax請求結束執行回撥的時候，

我們呼叫了一個resolve()函式，這句程式碼非常的關鍵.

這其實就是在通知Promise，當前這個函式結束啦，

你可以開始執行下一個。 這時Promise就會去執行then裡面的函式了。

問題2, 所以按照你的意思，如果我不呼叫這個方法，Promise就不知道這個函式有沒有結束，那麼then裡面的函式就不會執行，也就是說我的第二個請求就永遠不會傳送了唄？

Bingo!! 恭喜你已經學會了邏輯推理+搶答。

問題3, 可是這個resolve函式是從哪來的？ 需要我自己定義嗎？ 從程式碼上看它好像是個引數，那又是誰傳入函式中的？

你得先弄明白Promise的基本結構

new Promise(函式1).then(函式2);

 

我們把函式1和函式2都以引數形式傳給了一個Promise物件，

所以接下來函式1和2都會由這個Promise物件控制，

簡單的說，函式1和函式2都會由Promise物件來執行。

所以在函式1執行時，引數也當然是由Promise物件傳遞進去的。

 

new Promise(function(resolve){

  //resolve是Promise物件在呼叫函式時傳入的引數

}).then(函式2);

問題4, Promise物件為啥要在執行第1個任務的時候，把這個resolve函式 傳進來，有什麼目的？

你說呢？

廢屁，知道還用問你？

真是豬腦子，剛才不是已經說了嗎？

Promise物件沒辦法知道我們的非同步函式啥時候結束。

那我來問你， 如果你去車站接人，

可是你又不知道對方何時下車，你會咋辦？

把我電話號碼給他，快到了打我電話唄

沒錯，Promise解決問題也採用了同樣的思路。

它傳進來的resolve函式， 就好像一個對講機，

當我們的非同步任務要結束時，透過對講機 來通知Promise物件。

也就是呼叫resolve方法

 

new Promise(function(resolve){

    ajax("/pay/post",function(data){

        //當請求結束時，透過呼叫resolve方法，通知Promise物件，該任務已完成

        resolve(); //收到通知後，Promise會立刻開始函式2的執行

    })

}).then(函式2);

懂了，所以這個resolve函式，必須在非同步任務的最後呼叫(例如ajax的回撥方法)，相當於告訴Promise物件，該任務結束，請開始下一個。

完全正確

問題5, 所以Promise也不過如此嘛，它沒有帶來什麼功能上的革命性變化， 因為使用傳統的回撥巢狀的方式，同樣可以完成效果。 說白了它就是編碼方式上的改進？？

基本是這樣的，但Promise帶來的編碼方式以及非同步程式設計思路上的進步是非常巨大的。

問題6, 那如果我有ajaxA、ajaxB、ajaxC三個非同步任務，想按照先A後B再C的順序執行，像這樣寫行嗎？

new Promise(function(resolve){

    ajax("/AAA", function(){

        resolve(); //通知Promise該任務結束

    })    

}).then(function(resolve){

    ajax("/BBB", function(){

        resolve();//通知Promise該任務結束

    })

}).then(function(){

    ajax("/CCC", function(){ //.... })

})  

 

 

上面的這種寫法是不對的。

Promise的中文含義是“承諾”，

則意味著，每一個Pormise物件，代表一次承諾

而每一次承諾，只能保證一個任務的順序，也就是說

new Promise(A).then(B); 這句話表示， 只能保證A和B的順序

 

一旦A執行完，B開始後，這次承諾也就兌現了，Promise物件也就失效了

那如果還有C呢？ 我們就必須在函式B中，

重新建立新的Promise物件，來完成下一個承諾，具體的寫法就像這樣：

 

new Promise(函式1(resolve){

    ajaxA("xxxx", function(){

        resolve();//通知Promise該任務結束

    })    

}).then(函式2(){

    //在函式2開始執行後，第一次建立的Promise物件完成使命，已經不能再繼續工作。

    //此時，我們建立並返回了新的Promise物件

    return new Promise(function(resolve){

        ajaxB("xxxx", function(){

            resolve();//通知新的Promise物件該任務結束

        })    

    })

}).then(函式3(){ //儘管這裡使用了鏈式呼叫，但負責執行函式3的，已經是新的Promise物件了

    // 如果，我們還有ajaxD需要順序呼叫

    // 那就必須在這裡重新new Promise()物件了

    ajaxC("xxx", function(){     })

})   

問題7, 懂了，那Promise還有什麼其它強大的功能嗎？

有啊，例如： 如果我有 A,B,C 三個非同步任務，ABC同時開始執行

當A,B,C三個任務全部都結束時，執任務D，

傳統方法實現起來就比較複雜，Promise就非常簡單，就像這樣：

 

Promise.all([new Promise(A), new Promise(B), new Promise(C)])

.then(function(){

    D();

});

問題8, 那如果我希望A,B,C 其中任意一個任務完成，

就馬上開始任務D，該怎麼做？

Promise.race([new Promise(A), new Promise(B), new Promise(C)])

.then(function(){

   D();

});