自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

30分鐘，讓你徹底明白Promise原理

作者：佚名
開發(fā) 前端
前一陣子記錄了promise的一些常規(guī)用法，這篇文章再深入一個層次，來分析分析promise的這種規(guī)則機(jī)制是如何實現(xiàn)的。ps:本文適合已經(jīng)對promise的用法有所了解的人閱讀,如果對其用法還不是太了解，可以移步我的上一篇博文。

前言

前一陣子記錄了promise的一些常規(guī)用法，這篇文章再深入一個層次，來分析分析promise的這種規(guī)則機(jī)制是如何實現(xiàn)的。ps:本文適合已經(jīng)對promise的用法有所了解的人閱讀,如果對其用法還不是太了解，可以移步我的上一篇博文。

本文的promise源碼是按照Promise/A+規(guī)范來編寫的(不想看英文版的移步Promise/A+規(guī)范中文翻譯)

引子

為了讓大家更容易理解，我們從一個場景開始講解，讓大家一步一步跟著思路思考，相信你一定會更容易看懂。

考慮下面一種獲取用戶id的請求處理

  1. //例1 
  2.  
  3. function getUserId() { 
  4.  
  5.     return new Promise(function(resolve) { 
  6.  
  7.         //異步請求 
  8.  
  9.         http.get(url, function(results) { 
  10.  
  11.             resolve(results.id) 
  12.  
  13.         }) 
  14.  
  15.     }) 
  16.  
  17. } 
  18.  
  19.   
  20.  
  21. getUserId().then(function(id) { 
  22.  
  23.     //一些處理 
  24.  
  25. })  

getUserId方法返回一個promise，可以通過它的then方法注冊(注意注冊這個詞)在promise異步操作成功時執(zhí)行的回調(diào)。這種執(zhí)行方式，使得異步調(diào)用變得十分順手。

原理剖析

那么類似這種功能的Promise怎么實現(xiàn)呢?其實按照上面一句話，實現(xiàn)一個最基礎(chǔ)的雛形還是很easy的。

極簡promise雛形

  1. function Promise(fn) { 
  2.  
  3.     var value = null, 
  4.  
  5.         callbacks = [];  //callbacks為數(shù)組，因為可能同時有很多個回調(diào) 
  6.  
  7.   
  8.  
  9.     this.then = function (onFulfilled) { 
  10.  
  11.         callbacks.push(onFulfilled); 
  12.  
  13.     }; 
  14.  
  15.   
  16.  
  17.     function resolve(value) { 
  18.  
  19.         callbacks.forEach(function (callback) { 
  20.  
  21.             callback(value); 
  22.  
  23.         }); 
  24.  
  25.     } 
  26.  
  27.   
  28.  
  29.     fn(resolve); 
  30.  
  31. }  

上述代碼很簡單，大致的邏輯是這樣的：

  1. 調(diào)用then方法，將想要在Promise異步操作成功時執(zhí)行的回調(diào)放入callbacks隊列，其實也就是注冊回調(diào)函數(shù)，可以向觀察者模式方向思考;
  2. 創(chuàng)建Promise實例時傳入的函數(shù)會被賦予一個函數(shù)類型的參數(shù)，即resolve，它接收一個參數(shù)value，代表異步操作返回的結(jié)果，當(dāng)一步操作執(zhí)行成功后，用戶會調(diào)用resolve方法，這時候其實真正執(zhí)行的操作是將callbacks隊列中的回調(diào)一一執(zhí)行;

可以結(jié)合例1中的代碼來看，首先new Promise時，傳給promise的函數(shù)發(fā)送異步請求，接著調(diào)用promise對象的then屬性，注冊請求成功的回調(diào)函數(shù)，然后當(dāng)異步請求發(fā)送成功時，調(diào)用resolve(results.id)方法, 該方法執(zhí)行then方法注冊的回調(diào)數(shù)組。

相信仔細(xì)的人應(yīng)該可以看出來，then方法應(yīng)該能夠鏈?zhǔn)秸{(diào)用，但是上面的最基礎(chǔ)簡單的版本顯然無法支持鏈?zhǔn)秸{(diào)用。想讓then方法支持鏈?zhǔn)秸{(diào)用，其實也是很簡單的：

  1. this.then = function (onFulfilled) { 
  2.  
  3.     callbacks.push(onFulfilled); 
  4.  
  5.     return this; 
  6.  
  7. };  

see?只要簡單一句話就可以實現(xiàn)類似下面的鏈?zhǔn)秸{(diào)用：

  1. // 例2 
  2.  
  3. getUserId().then(function (id) { 
  4.  
  5.     // 一些處理 
  6.  
  7. }).then(function (id) { 
  8.  
  9.     // 一些處理 
  10.  
  11. });  

加入延時機(jī)制

細(xì)心的同學(xué)應(yīng)該發(fā)現(xiàn)，上述代碼可能還存在一個問題：如果在then方法注冊回調(diào)之前，resolve函數(shù)就執(zhí)行了，怎么辦?比如promise內(nèi)部的函數(shù)是同步函數(shù)：

  1. // 例3 
  2.  
  3. function getUserId() { 
  4.  
  5.     return new Promise(function (resolve) { 
  6.  
  7.         resolve(9876); 
  8.  
  9.     }); 
  10.  
  11. } 
  12.  
  13. getUserId().then(function (id) { 
  14.  
  15.     // 一些處理 
  16.  
  17. });  

這顯然是不允許的，Promises/A+規(guī)范明確要求回調(diào)需要通過異步方式執(zhí)行，用以保證一致可靠的執(zhí)行順序。因此我們要加入一些處理，保證在resolve執(zhí)行之前，then方法已經(jīng)注冊完所有的回調(diào)。我們可以這樣改造下resolve函數(shù):

  1. function resolve(value) { 
  2.  
  3.     setTimeout(function() { 
  4.  
  5.         callbacks.forEach(function (callback) { 
  6.  
  7.             callback(value); 
  8.  
  9.         }); 
  10.  
  11.     }, 0) 
  12.  
  13. }  

上述代碼的思路也很簡單，就是通過setTimeout機(jī)制，將resolve中執(zhí)行回調(diào)的邏輯放置到JS任務(wù)隊列末尾，以保證在resolve執(zhí)行時，then方法的回調(diào)函數(shù)已經(jīng)注冊完成.

但是，這樣好像還存在一個問題，可以細(xì)想一下：如果Promise異步操作已經(jīng)成功，這時，在異步操作成功之前注冊的回調(diào)都會執(zhí)行，但是在Promise異步操作成功這之后調(diào)用的then注冊的回調(diào)就再也不會執(zhí)行了，這顯然不是我們想要的。

加入狀態(tài)

恩，為了解決上一節(jié)拋出的問題，我們必須加入狀態(tài)機(jī)制，也就是大家熟知的pending、fulfilled、rejected。

Promises/A+規(guī)范中的2.1Promise States中明確規(guī)定了，pending可以轉(zhuǎn)化為fulfilled或rejected并且只能轉(zhuǎn)化一次，也就是說如果pending轉(zhuǎn)化到fulfilled狀態(tài)，那么就不能再轉(zhuǎn)化到rejected。并且fulfilled和rejected狀態(tài)只能由pending轉(zhuǎn)化而來，兩者之間不能互相轉(zhuǎn)換。一圖勝千言：

 

改進(jìn)后的代碼是這樣的：

  1. function Promise(fn) { 
  2.  
  3.     var state = 'pending', 
  4.  
  5.         value = null, 
  6.  
  7.         callbacks = []; 
  8.  
  9.   
  10.  
  11.     this.then = function (onFulfilled) { 
  12.  
  13.         if (state === 'pending') { 
  14.  
  15.             callbacks.push(onFulfilled); 
  16.  
  17.             return this; 
  18.  
  19.         } 
  20.  
  21.         onFulfilled(value); 
  22.  
  23.         return this; 
  24.  
  25.     }; 
  26.  
  27.   
  28.  
  29.     function resolve(newValue) { 
  30.  
  31.         value = newValue; 
  32.  
  33.         state = 'fulfilled'; 
  34.  
  35.         setTimeout(function () { 
  36.  
  37.             callbacks.forEach(function (callback) { 
  38.  
  39.                 callback(value); 
  40.  
  41.             }); 
  42.  
  43.         }, 0); 
  44.  
  45.     } 
  46.  
  47.   
  48.  
  49.     fn(resolve); 
  50.  
  51. }  

上述代碼的思路是這樣的：resolve執(zhí)行時，會將狀態(tài)設(shè)置為fulfilled，在此之后調(diào)用then添加的新回調(diào)，都會立即執(zhí)行。

這里沒有任何地方將state設(shè)為rejected，為了讓大家聚焦在核心代碼上，這個問題后面會有一小節(jié)專門加入。

鏈?zhǔn)絇romise

那么這里問題又來了，如果用戶再then函數(shù)里面注冊的仍然是一個Promise，該如何解決?比如下面的例4：

  1. // 例4 
  2.  
  3. getUserId() 
  4.  
  5.     .then(getUserJobById) 
  6.  
  7.     .then(function (job) { 
  8.  
  9.         // 對job的處理 
  10.  
  11.     }); 
  12.  
  13.   
  14.  
  15. function getUserJobById(id) { 
  16.  
  17.     return new Promise(function (resolve) { 
  18.  
  19.         http.get(baseUrl + id, function(job) { 
  20.  
  21.             resolve(job); 
  22.  
  23.         }); 
  24.  
  25.     }); 
  26.  
  27. }  

這種場景相信用過promise的人都知道會有很多，那么類似這種就是所謂的鏈?zhǔn)絇romise。

鏈?zhǔn)絇romise是指在當(dāng)前promise達(dá)到fulfilled狀態(tài)后，即開始進(jìn)行下一個promise(后鄰promise)。那么我們?nèi)绾毋暯赢?dāng)前promise和后鄰promise呢?(這是這里的難點(diǎn))。

其實也不是辣么難，只要在then方法里面return一個promise就好啦。Promises/A+規(guī)范中的2.2.7就是這么說噠(微笑臉)~

下面來看看這段暗藏玄機(jī)的then方法和resolve方法改造代碼：

  1. function Promise(fn) { 
  2.  
  3.     var state = 'pending', 
  4.  
  5.         value = null, 
  6.  
  7.         callbacks = []; 
  8.  
  9.   
  10.  
  11.     this.then = function (onFulfilled) { 
  12.  
  13.         return new Promise(function (resolve) { 
  14.  
  15.             handle({ 
  16.  
  17.                 onFulfilled: onFulfilled || null, 
  18.  
  19.                 resolve: resolve 
  20.  
  21.             }); 
  22.  
  23.         }); 
  24.  
  25.     }; 
  26.  
  27.   
  28.  
  29.     function handle(callback) { 
  30.  
  31.         if (state === 'pending') { 
  32.  
  33.             callbacks.push(callback); 
  34.  
  35.             return; 
  36.  
  37.         } 
  38.  
  39.         //如果then中沒有傳遞任何東西 
  40.  
  41.         if(!callback.onResolved) { 
  42.  
  43.             callback.resolve(value); 
  44.  
  45.             return; 
  46.  
  47.         } 
  48.  
  49.   
  50.  
  51.         var ret = callback.onFulfilled(value); 
  52.  
  53.         callback.resolve(ret); 
  54.  
  55.     } 
  56.  
  57.   
  58.  
  59.      
  60.  
  61.     function resolve(newValue) { 
  62.  
  63.         if (newValue && (typeof newValue === 'object' || typeof newValue === 'function')) { 
  64.  
  65.             var then = newValue.then; 
  66.  
  67.             if (typeof then === 'function') { 
  68.  
  69.                 then.call(newValue, resolve); 
  70.  
  71.                 return; 
  72.  
  73.             } 
  74.  
  75.         } 
  76.  
  77.         state = 'fulfilled'; 
  78.  
  79.         value = newValue; 
  80.  
  81.         setTimeout(function () { 
  82.  
  83.             callbacks.forEach(function (callback) { 
  84.  
  85.                 handle(callback); 
  86.  
  87.             }); 
  88.  
  89.         }, 0); 
  90.  
  91.     } 
  92.  
  93.   
  94.  
  95.     fn(resolve); 
  96.  
  97. }  

我們結(jié)合例4的代碼，分析下上面的代碼邏輯，為了方便閱讀，我把例4的代碼貼在這里：

  1. // 例4 
  2.  
  3. getUserId() 
  4.  
  5.     .then(getUserJobById) 
  6.  
  7.     .then(function (job) { 
  8.  
  9.         // 對job的處理 
  10.  
  11.     }); 
  12.  
  13.   
  14.  
  15. function getUserJobById(id) { 
  16.  
  17.     return new Promise(function (resolve) { 
  18.  
  19.         http.get(baseUrl + id, function(job) { 
  20.  
  21.             resolve(job); 
  22.  
  23.         }); 
  24.  
  25.     }); 
  26.  
  27. }  
  1. then方法中，創(chuàng)建并返回了新的Promise實例，這是串行Promise的基礎(chǔ)，并且支持鏈?zhǔn)秸{(diào)用。
  2. handle方法是promise內(nèi)部的方法。then方法傳入的形參onFulfilled以及創(chuàng)建新Promise實例時傳入的resolve均被push到當(dāng)前promise的callbacks隊列中，這是銜接當(dāng)前promise和后鄰promise的關(guān)鍵所在(這里一定要好好的分析下handle的作用)。
  3. getUserId生成的promise(簡稱getUserId promise)異步操作成功，執(zhí)行其內(nèi)部方法resolve，傳入的參數(shù)正是異步操作的結(jié)果id
  4. 調(diào)用handle方法處理callbacks隊列中的回調(diào)：getUserJobById方法，生成新的promise(getUserJobById promise)
  5. 執(zhí)行之前由getUserId promise的then方法生成的新promise(稱為bridge promise)的resolve方法，傳入?yún)?shù)為getUserJobById promise。這種情況下，會將該resolve方法傳入getUserJobById promise的then方法中，并直接返回。
  6. 在getUserJobById promise異步操作成功時，執(zhí)行其callbacks中的回調(diào)：getUserId bridge promise中的resolve方法
  7. ***執(zhí)行g(shù)etUserId bridge promise的后鄰promise的callbacks中的回調(diào)。

更直白的可以看下面的圖，一圖勝千言(都是根據(jù)自己的理解畫出來的，如有不對歡迎指正)：

 

失敗處理

在異步操作失敗時，標(biāo)記其狀態(tài)為rejected，并執(zhí)行注冊的失敗回調(diào):

  1. //例5 
  2.  
  3. function getUserId() { 
  4.  
  5.     return new Promise(function(resolve) { 
  6.  
  7.         //異步請求 
  8.  
  9.         http.get(url, function(error, results) { 
  10.  
  11.             if (error) { 
  12.  
  13.                 reject(error); 
  14.  
  15.             } 
  16.  
  17.             resolve(results.id) 
  18.  
  19.         }) 
  20.  
  21.     }) 
  22.  
  23. } 
  24.  
  25.   
  26.  
  27. getUserId().then(function(id) { 
  28.  
  29.     //一些處理 
  30.  
  31. }, function(error) { 
  32.  
  33.     console.log(error) 
  34.  
  35. })  

有了之前處理fulfilled狀態(tài)的經(jīng)驗，支持錯誤處理變得很容易,只需要在注冊回調(diào)、處理狀態(tài)變更上都要加入新的邏輯：

  1. function Promise(fn) { 
  2.  
  3.     var state = 'pending', 
  4.  
  5.         value = null, 
  6.  
  7.         callbacks = []; 
  8.  
  9.   
  10.  
  11.     this.then = function (onFulfilled, onRejected) { 
  12.  
  13.         return new Promise(function (resolve, reject) { 
  14.  
  15.             handle({ 
  16.  
  17.                 onFulfilled: onFulfilled || null, 
  18.  
  19.                 onRejected: onRejected || null, 
  20.  
  21.                 resolve: resolve, 
  22.  
  23.                 reject: reject 
  24.  
  25.             }); 
  26.  
  27.         }); 
  28.  
  29.     }; 
  30.  
  31.   
  32.  
  33.     function handle(callback) { 
  34.  
  35.         if (state === 'pending') { 
  36.  
  37.             callbacks.push(callback); 
  38.  
  39.             return; 
  40.  
  41.         } 
  42.  
  43.   
  44.  
  45.         var cb = state === 'fulfilled' ? callback.onFulfilled : callback.onRejected, 
  46.  
  47.             ret; 
  48.  
  49.         if (cb === null) { 
  50.  
  51.             cb = state === 'fulfilled' ? callback.resolve : callback.reject; 
  52.  
  53.             cb(value); 
  54.  
  55.             return; 
  56.  
  57.         } 
  58.  
  59.         ret = cb(value); 
  60.  
  61.         callback.resolve(ret); 
  62.  
  63.     } 
  64.  
  65.   
  66.  
  67.     function resolve(newValue) { 
  68.  
  69.         if (newValue && (typeof newValue === 'object' || typeof newValue === 'function')) { 
  70.  
  71.             var then = newValue.then; 
  72.  
  73.             if (typeof then === 'function') { 
  74.  
  75.                 then.call(newValue, resolve, reject); 
  76.  
  77.                 return; 
  78.  
  79.             } 
  80.  
  81.         } 
  82.  
  83.         state = 'fulfilled'; 
  84.  
  85.         value = newValue; 
  86.  
  87.         execute(); 
  88.  
  89.     } 
  90.  
  91.   
  92.  
  93.     function reject(reason) { 
  94.  
  95.         state = 'rejected'; 
  96.  
  97.         value = reason; 
  98.  
  99.         execute(); 
  100.  
  101.     } 
  102.  
  103.   
  104.  
  105.     function execute() { 
  106.  
  107.         setTimeout(function () { 
  108.  
  109.             callbacks.forEach(function (callback) { 
  110.  
  111.                 handle(callback); 
  112.  
  113.             }); 
  114.  
  115.         }, 0); 
  116.  
  117.     } 
  118.  
  119.   
  120.  
  121.     fn(resolve, reject); 
  122.  
  123. }  

上述代碼增加了新的reject方法，供異步操作失敗時調(diào)用，同時抽出了resolve和reject共用的部分，形成execute方法。

錯誤冒泡是上述代碼已經(jīng)支持，且非常實用的一個特性。在handle中發(fā)現(xiàn)沒有指定異步操作失敗的回調(diào)時，會直接將bridge promise(then函數(shù)返回的promise，后同)設(shè)為rejected狀態(tài)，如此達(dá)成執(zhí)行后續(xù)失敗回調(diào)的效果。這有利于簡化串行Promise的失敗處理成本，因為一組異步操作往往會對應(yīng)一個實際功能，失敗處理方法通常是一致的：

  1. //例6 
  2.  
  3. getUserId() 
  4.  
  5.     .then(getUserJobById) 
  6.  
  7.     .then(function (job) { 
  8.  
  9.         // 處理job 
  10.  
  11.     }, function (error) { 
  12.  
  13.         // getUserId或者getUerJobById時出現(xiàn)的錯誤 
  14.  
  15.         console.log(error); 
  16.  
  17.     });  

異常處理

細(xì)心的同學(xué)會想到：如果在執(zhí)行成功回調(diào)、失敗回調(diào)時代碼出錯怎么辦?對于這類異常，可以使用try-catch捕獲錯誤，并將bridge promise設(shè)為rejected狀態(tài)。handle方法改造如下：

  1. function handle(callback) { 
  2.  
  3.     if (state === 'pending') { 
  4.  
  5.         callbacks.push(callback); 
  6.  
  7.         return; 
  8.  
  9.     } 
  10.  
  11.   
  12.  
  13.     var cb = state === 'fulfilled' ? callback.onFulfilled : callback.onRejected, 
  14.  
  15.         ret; 
  16.  
  17.     if (cb === null) { 
  18.  
  19.         cb = state === 'fulfilled' ? callback.resolve : callback.reject; 
  20.  
  21.         cb(value); 
  22.  
  23.         return; 
  24.  
  25.     } 
  26.  
  27.     try { 
  28.  
  29.         ret = cb(value); 
  30.  
  31.         callback.resolve(ret); 
  32.  
  33.     } catch (e) { 
  34.  
  35.         callback.reject(e); 
  36.  
  37.     } 
  38.  
  39. }  

如果在異步操作中，多次執(zhí)行resolve或者reject會重復(fù)處理后續(xù)回調(diào)，可以通過內(nèi)置一個標(biāo)志位解決。

總結(jié)

剛開始看promise源碼的時候總不能很好的理解then和resolve函數(shù)的運(yùn)行機(jī)理，但是如果你靜下心來，反過來根據(jù)執(zhí)行promise時的邏輯來推演，就不難理解了。這里一定要注意的點(diǎn)是：promise里面的then函數(shù)僅僅是注冊了后續(xù)需要執(zhí)行的代碼，真正的執(zhí)行是在resolve方法里面執(zhí)行的，理清了這層，再來分析源碼會省力的多。

現(xiàn)在回顧下Promise的實現(xiàn)過程，其主要使用了設(shè)計模式中的觀察者模式：

  1. 通過Promise.prototype.then和Promise.prototype.catch方法將觀察者方法注冊到被觀察者Promise對象中，同時返回一個新的Promise對象，以便可以鏈?zhǔn)秸{(diào)用。
  2. 被觀察者管理內(nèi)部pending、fulfilled和rejected的狀態(tài)轉(zhuǎn)變，同時通過構(gòu)造函數(shù)中傳遞的resolve和reject方法以主動觸發(fā)狀態(tài)轉(zhuǎn)變和通知觀察者。

參考文獻(xiàn)

  • 深入理解 Promise
  • JavaScript Promises … In Wicked Detail 
責(zé)任編輯：龐桂玉 來源： 前端大全
PromiseJavascript前端
相關(guān)推薦

2021-11-07 23:46:32

MySQLSQL索引

2017-11-20 10:25:20

數(shù)據(jù)庫MySQL索引

2021-11-11 15:03:35

MySQLSQL索引

2019-06-05 09:42:53

Kafka App 消息隊列

2017-07-18 11:10:45

2021-08-02 15:40:20

Java日志工具

2020-12-08 08:14:11

SQL注入數(shù)據(jù)庫

2017-01-10 09:07:53

tcpdumpGET請求

2019-10-12 08:36:48

Java程序員數(shù)據(jù)結(jié)構(gòu)

2013-05-03 10:57:09

泛型泛型教程

2009-11-05 10:56:31

WCF通訊

2021-06-18 07:34:12

Kafka中間件微服務(wù)

2020-05-22 10:20:27

Shiro架構(gòu)字符串

2023-07-15 18:26:51

LinuxABI

2015-11-12 10:32:40

GitHub控制系統(tǒng)分布式

2020-11-06 08:54:43

Vue 3.0函數(shù)代碼

2009-10-27 09:17:26

VB.NET生成靜態(tài)頁

2014-11-10 12:29:52

客服網(wǎng)站

2021-02-16 09:17:40

VimLinux編輯器

2017-09-09 13:29:22

ARCoreAndroid移動設(shè)備
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號