系列教程:如何講清楚Promise?

如何講清楚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?

 

接下來,我們就按照費曼技巧來一步步的學習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();
});

恭喜你,在這麼短的時間內學會了Promise,下一篇,我們接着說async和await

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章