這篇文章主要介紹了詳細解讀JavaScript編程中的Promise使用,是JS入門學習中的基礎知識,需要的朋友可以參考下

Promise核心說明

盡管Promise已經有自己的規范，但目前的各類Promise庫，在Promise的實現細節上是有差異的，部分API甚至在意義上完全不同。但Promise的核心內容，是相通的，它就是then方法。在相關術語中，promise指的就是一個有then方法，且該方法能觸發特定行為的對象或函數。

Promise可以有不同的實現方式，因此Promise核心說明并不會討論任何具體的實現代碼。

先閱讀Promise核心說明的意思是：看，這就是需要寫出來的結果，請參照這個結果想一想怎么用代碼寫出來吧。

起步：用這一種方式理解Promise

回想一下Promise解決的是什么問題?回調。例如，函數doMission1()代表第一件事情，現在，我們想要在這件事情完成后，再做下一件事情doMission2()，應該怎么做呢?

先看看我們常見的回調模式。doMission1()說：“你要這么做的話，就把doMission2()交給我，我在結束后幫你調用。”所以會是：

1. doMission1(doMission2); 

Promise模式又是如何呢?你對doMission1()說：“不行，控制權要在我這里。你應該改變一下，你先返回一個特別的東西給我，然后我來用這個東西安排下一件事。”這個特別的東西就是Promise，這會變成這樣：

1. doMission1().then(doMission2); 

可以看出，Promise將回調模式的主從關系調換了一個位置(翻身做主人!)，多個事件的流程關系，就可以這樣集中到主干道上(而不是分散在各個事件函數之內)。

好了，如何做這樣一個轉換呢?從最簡單的情況來吧，假定doMission1()的代碼是：

1. function doMission1(callback){ 
2. var value = 1; 
3. callback(value); 
4. } 

那么，它可以改變一下，變成這樣：

1. function doMission1(){ 
2. return { 
3. then: function(callback){ 
4. var value = 1; 
5. callback(value); 
6. } 
7. }; 
8. } 

這就完成了轉換。雖然并不是實際有用的轉換，但到這里，其實已經觸及了Promise最為重要的實現要點，即Promise將返回值轉換為帶then方法的對象。

進階：Q的設計路程

從defer開始

design/q0.js是Q初步成型的第一步。它創建了一個名為defer的工具函數，用于創建Promise：

1. var defer = function () { 
2. var pending = [], value; 
3. return { 
4. resolve: function (_value) { 
5. value = _value; 
6. for (var i = 0, ii = pending.length; i < ii; i++) { 
7. var callback = pending[i]; 
8. callback(value); 
9. } 
10. pending = undefined; 
11. }, 
12. then: function (callback) { 
13. if (pending) { 
14. pending.push(callback); 
15. } else { 
16. callback(value); 
17. } 
18. } 
19. } 
20. }; 

這段源碼可以看出，運行defer()將得到一個對象，該對象包含resolve和then兩個方法。請回想一下jQuery的Deferred(同樣有resolve和then)，這兩個方法將會是近似的效果。then會參考pending的狀態，如果是等待狀態則將回調保存(push)，否則立即調用回調。resolve則將肯定這個Promise，更新值的同時運行完所有保存的回調。defer的使用示例如下：

1. var oneOneSecondLater = function () { 
2. var result = defer(); 
3. setTimeout(function () { 
4. result.resolve(1); 
5. }, 1000); 
6. return result; 
7. }; 

oneOneSecondLater().then(callback);

這里oneOneSecondLater()包含異步內容(setTimeout)，但這里讓它立即返回了一個defer()生成的對象，然后將對象的resolve方法放在異步結束的位置調用(并附帶上值，或者說結果)。

到此，以上代碼存在一個問題：resolve可以被執行多次。因此，resolve中應該加入對狀態的判斷，保證resolve只有一次有效。這就是Q下一步的design/q1.js(僅差異部分)：

1. resolve: function (_value) { 
2. if (pending) { 
3. value = _value; 
4. for (var i = 0, ii = pending.length; i < ii; i++) { 
5. var callback = pending[i]; 
6. callback(value); 
7. } 
8. pending = undefined; 
9. } else { 
10. throw new Error("A promise can only be resolved once."); 
11. } 
12. } 

對第二次及更多的調用，可以這樣拋出一個錯誤，也可以直接忽略掉。

分離defer和promise

在前面的實現中，defer生成的對象同時擁有then方法和resolve方法。按照定義，promise關心的是then方法，至于觸發promise改變狀態的resolve，是另一回事。所以，Q接下來將擁有then方法的promise，和擁有resolve的defer分離開來，各自獨立使用。這樣就好像劃清了各自的職責，各自只留一定的權限，這會使代碼邏輯更明晰，易于調整。請看design/q3.js：(q2在此跳過)

1. var isPromise = function (value) { 
2. return value && typeof value.then === "function"; 
3. }; 
4.  
5. var defer = function () { 
6. var pending = [], value; 
7. return { 
8. resolve: function (_value) { 
9. if (pending) { 
10. value = _value; 
11. for (var i = 0, ii = pending.length; i < ii; i++) { 
12. var callback = pending[i]; 
13. callback(value); 
14. } 
15. pending = undefined; 
16. } 
17. }, 
18. promise: { 
19. then: function (callback) { 
20. if (pending) { 
21. pending.push(callback); 
22. } else { 
23. callback(value); 
24. } 
25. } 
26. } 
27. }; 
28. }; 

如果你仔細對比一下q1，你會發現區別很小。一方面，不再拋出錯誤(改為直接忽略第二次及更多的resolve)，另一方面，將then方法移動到一個名為promise的對象內。到這里，運行defer()得到的對象(就稱為defer吧)，將擁有resolve方法，和一個promise屬性指向另一個對象。這另一個對象就是僅有then方法的promise。這就完成了分離。

前面還有一個isPromise()函數，它通過是否有then方法來判斷對象是否是promise(duck-typing的判斷方法)。為了正確使用和處理分離開的promise，會像這樣需要將promise和其他值區分開來。

實現promise的級聯

接下來會是相當重要的一步。到前面到q3為止，所實現的promise都是不能級聯的。但你所熟知的promise應該支持這樣的語法：

1. promise.then(step1).then(step2); 

以上過程可以理解為，promise將可以創造新的promise，且取自舊的promise的值(前面代碼中的value)。要實現then的級聯，需要做到一些事情：

then方法必須返回promise。

這個返回的promise必須用傳遞給then方法的回調運行后的返回結果，來設置自己的值。

傳遞給then方法的回調，必須返回一個promise或值。

design/q4.js中，為了實現這一點，新增了一個工具函數ref：

1. var ref = function (value) { 
2. if (value && typeof value.then === "function") 
3. return value; 
4. return { 
5. then: function (callback) { 
6. return ref(callback(value)); 
7. } 
8. }; 
9. }; 

這是在著手處理與promise關聯的value。這個工具函數將對任一個value值做一次包裝，如果是一個promise，則什么也不做，如果不是promise，則將它包裝成一個promise。注意這里有一個遞歸，它確保包裝成的promise可以使用then方法級聯。為了幫助理解它，下面是一個使用的例子：

1. ref("step1").then(function(value){ 
2. console.log(value); // "step1" 
3. return 15; 
4. }).then(function(value){ 
5. console.log(value); // 15 
6. }); 

你可以看到value是怎樣傳遞的，promise級聯需要做到的也是如此。

design/q4.js通過結合使用這個ref函數，將原來的defer轉變為可級聯的形式：

1. var defer = function () { 
2. var pending = [], value; 
3. return { 
4. resolve: function (_value) { 
5. if (pending) { 
6. value = ref(_value); // values wrapped in a promise 
7. for (var i = 0, ii = pending.length; i < ii; i++) { 
8. var callback = pending[i]; 
9. value.then(callback); // then called instead 
10. } 
11. pending = undefined; 
12. } 
13. }, 
14. promise: { 
15. then: function (_callback) { 
16. var result = defer(); 
17. // callback is wrapped so that its return 
18. // value is captured and used to resolve the promise 
19. // that "then" returns 
20. var callback = function (value) { 
21. result.resolve(_callback(value)); 
22. }; 
23. if (pending) { 
24. pending.push(callback); 
25. } else { 
26. value.then(callback); 
27. } 
28. return result.promise; 
29. } 
30. } 
31. }; 
32. }; 

原來callback(value)的形式，都修改為value.then(callback)。這個修改后效果其實和原來相同，只是因為value變成了promise包裝的類型，會需要這樣調用。

then方法有了較多變動，會先新生成一個defer，并在結尾處返回這個defer的promise。請注意，callback不再是直接取用傳遞給then的那個，而是在此基礎之上增加一層，并把新生成的defer的resolve方法放置在此。此處可以理解為，then方法將返回一個新生成的promise，因此需要把promise的resolve也預留好，在舊的promise的resolve運行后，新的promise的resolve也會隨之運行。這樣才能像管道一樣，讓事件按照then連接的內容，一層一層傳遞下去。

加入錯誤處理

promise的then方法應該可以包含兩個參數，分別是肯定和否定狀態的處理函數(onFulfilled與onRejected)。前面我們實現的promise還只能轉變為肯定狀態，所以，接下來應該加入否定狀態部分。

請注意，promise的then方法的兩個參數，都是可選參數。design/q6.js(q5也跳過)加入了工具函數reject來幫助實現promise的否定狀態：

1. var reject = function (reason) { 
2. return { 
3. then: function (callback, errback) { 
4. return ref(errback(reason)); 
5. } 
6. }; 
7. }; 

它和ref的主要區別是，它返回的對象的then方法，只會取第二個參數的errback來運行。design/q6.js的其余部分是：

1. var defer = function () { 
2. var pending = [], value; 
3. return { 
4. resolve: function (_value) { 
5. if (pending) { 
6. value = ref(_value); 
7. for (var i = 0, ii = pending.length; i < ii; i++) { 
8. value.then.apply(value, pending[i]); 
9. } 
10. pending = undefined; 
11. } 
12. }, 
13. promise: { 
14. then: function (_callback, _errback) { 
15. var result = defer(); 
16. // provide default callbacks and errbacks 
17. _callback = _callback || function (value) { 
18. // by default, forward fulfillment 
19. return value; 
20. }; 
21. _errback = _errback || function (reason) { 
22. // by default, forward rejection 
23. return reject(reason); 
24. }; 
25. var callback = function (value) { 
26. result.resolve(_callback(value)); 
27. }; 
28. var errback = function (reason) { 
29. result.resolve(_errback(reason)); 
30. }; 
31. if (pending) { 
32. pending.push([callback, errback]); 
33. } else { 
34. value.then(callback, errback); 
35. } 
36. return result.promise; 
37. } 
38. } 
39. }; 
40. }; 

這里的主要改動是，將數組pending只保存單個回調的形式，改為同時保存肯定和否定的兩種回調的形式。而且，在then中定義了默認的肯定和否定回調，使得then方法滿足了promise的2個可選參數的要求。

你也許注意到defer中還是只有一個resolve方法，而沒有類似jQuery的reject。那么，錯誤處理要如何觸發呢?請看這個例子：

1. var defer1 = defer(), 
2. promise1 = defer1.promise; 
3. promise1.then(function(value){ 
4. console.log("1: value = ", value); 
5. return reject("error happens");  
6. }).then(function(value){ 
7. console.log("2: value = ", value); 
8. }).then(null, function(reason){ 
9. console.log("3: reason = ", reason); 
10. }); 
11. defer1.resolve(10); 
12.  
13. // Result: 
14. // 1: value = 10 
15. // 3: reason = error happens 

可以看出，每一個傳遞給then方法的返回值是很重要的，它將決定下一個then方法的調用結果。而如果像上面這樣返回工具函數reject生成的對象，就會觸發錯誤處理。

融入異步

終于到了最后的design/q7.js。直到前面的q6，還存在一個問題，就是then方法運行的時候，可能是同步的，也可能是異步的，這取決于傳遞給then的函數(例如直接返回一個值，就是同步，返回一個其他的promise，就可以是異步)。這種不確定性可能帶來潛在的問題。因此，Q的后面這一步，是確保將所有then轉變為異步。

design/q7.js定義了另一個工具函數enqueue：

1. var enqueue = function (callback) { 
2. //process.nextTick(callback); // NodeJS 
3. setTimeout(callback, 1); // Na?ve browser solution 
4. }; 

顯然，這個工具函數會將任意函數推遲到下一個事件隊列運行。

design/q7.js其他的修改點是(只顯示修改部分)：

1. var ref = function (value) { 
2. // ... 
3. return { 
4. then: function (callback) { 
5. var result = defer(); 
6. // XXX 
7. enqueue(function () { 
8. result.resolve(callback(value)); 
9. }); 
10. return result.promise; 
11. } 
12. }; 
13. }; 
14.  
15. var reject = function (reason) { 
16. return { 
17. then: function (callback, errback) { 
18. var result = defer(); 
19. // XXX 
20. enqueue(function () { 
21. result.resolve(errback(reason)); 
22. }); 
23. return result.promise; 
24. } 
25. }; 
26. }; 
27.  
28. var defer = function () { 
29. var pending = [], value; 
30. return { 
31. resolve: function (_value) { 
32. // ... 
33. enqueue(function () { 
34. value.then.apply(value, pending[i]); 
35. }); 
36. // ... 
37. }, 
38. promise: { 
39. then: function (_callback, _errback) { 
40. // ... 
41. enqueue(function () { 
42. value.then(callback, errback); 
43. }); 
44. // ... 
45. } 
46. } 
47. }; 
48. }; 

即把原來的value.then的部分，都轉變為異步。

到此，Q提供的Promise設計原理q0~q7，全部結束。

結語

即便本文已經是這么長的篇幅，但所講述的也只到基礎的Promise。大部分Promise庫會有更多的API來應對更多和Promise有關的需求，例如all()、spread()，不過，讀到這里，你已經了解了實現Promise的核心理念，這一定對你今后應用Promise有所幫助。

在我看來，Promise是精巧的設計，我花了相當一些時間才差不多理解它。Q作為一個典型Promise庫，在思路上走得很明確。可以感受到，再復雜的庫也是先從基本的要點開始的，如果我們自己要做類似的事，也應該保持這樣的心態一點一點進步。