promise設置教程（系列教程如何講清楚Promise）

2023-07-26 05:36:38 1

如何講清楚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;});

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