怎么理解Promise中的core.js

這篇文章主要講解了“怎么理解Promise中的core.js”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么理解Promise中的core.js”吧！

源碼閱讀階段

先理解Promise根本吧,想快點理解的話可以直接跳到下個標題.這部分根據理解將持續修改。

Promise(fn)

function noop() {} /* 空函數,用于判斷傳入Promise構造器的函數是否為空函數,如果為空函數構造一個promise對象并初始化狀態為pending,終值null,回調狀態0和隊列null. */ var LAST_ERROR = null;//記錄Promise內部***的一次錯誤 var IS_ERROR = {}; //空對象,標識表示發生了錯誤 module.exports = Promise; //暴露模塊接口為Promise function Promise(fn) {   if (typeof this !== 'object') {     throw new TypeError('Promises must be constructed via new');   }   if (typeof fn !== 'function') {     throw new TypeError('Promise constructor\'s argument is not a function');   }   this._deferredState = 0;   this._state = 0; //promise狀態   this._value = null; //resolve返回的結果   this._deferreds = null;   if (fn === noop) return;   doResolve(fn, this); //處理函數 } Promise._onHandle = null; Promise._onReject = null; Promise._noop = noop;

原文中表示將帶有_前綴的變量在構造的時候轉為(_隨機數)的形式,來混淆和阻止它們被使用.接下來列出說明重要的變量。

* _defferedState = 0 表示_deferreds的類型,0時表示null,1時表示單個handler(后面講述),2表示多個deferreds(數組) * _state = 0 promise狀態,0為pending,1為fulfilled,2為rejected,3則為值已被傳遞給下個promise. * _value = null resolve返回的結果,也就是我們所說的終值/拒因 * _deferreds = null 表示單個或多個handler(后面講述)

doResolve(fn,this)

相比大家都看到這行函數了doResolve(fn,  this);,這里也就是我們初始化一個Promise時會做的事了,我們在看這個函數前,先理解下源碼中類似于工具函數一樣的函數。

//獲取then方法,沒有then方法標識錯誤 function getThen(obj) {   try {     return obj.then;   } catch (ex) {     LAST_ERROR = ex;     return IS_ERROR;   } } //內部捕獲錯誤,單個參數函數 function tryCallOne(fn, a) {   try {     return fn(a);   } catch (ex) {     LAST_ERROR = ex;     return IS_ERROR;   } } //內部捕獲錯誤,兩個參數函數 function tryCallTwo(fn, a, b) {   try {     fn(a, b);   } catch (ex) {     LAST_ERROR = ex;     return IS_ERROR;   } }

接下來我們直接跳到doResolve(fn,promise)處：

function doResolve(fn, promise) {//傳入參數為一個函數,一個promise對象   var done = false; //保證了規范中提到的一次性   var res = tryCallTwo(fn, function (value) {//看到了么,用于捕獲錯誤.     if (done) return; //這里不用說了,為了保證兩個函數中只有一個函數運行且僅運行一次     done = true;     resolve(promise, value);//后續再分析它   }, function (reason) {     if (done) return;     done = true;     reject(promise, reason);//后續再分析它   });   if (!done && res === IS_ERROR) {     done = true;     reject(promise, LAST_ERROR);//后續再分析它   } }

這就是我們的doResolve函數,可以看出,它只是個中間件,用于干什么的呢,就是解決傳入函數error問題并進行reject的.重點是調用了我們很眼熟的兩個函數,resolve()和reject()。

resolve() and reject()

在這個函數里我們找到了兩個新東西,resolve()和reject(),看名字就知道這兩個函數是什么啦,我們先看reject()吧！

function reject(self, newValue) {//兩個參數,從doResolve我們可以知道self是一個promise對象,而newValue就是拒因啦   self._state = 2;//狀態變成rejected了   self._value = newValue;//promise中結果變為拒因   if (Promise._onReject) {//在core.js中它為null,所以可能是用于別的功能.我們直接跳過     Promise._onReject(self, newValue);   }   finale(self);//新的函數又出現了. }

reject()函數傳入了promise對象和一個reason拒因,函數做的就是將promise的狀態變為rejected,并將promise的值進行更改.然后調用finale()函數。

可以看到出現了新函數finale(),并且傳了已經進行完reject的promise對象給它.但是我們還是先看resolve()吧！

function resolve(self, newValue) { //這里寫的其實就是按照規范處理的流程   /* Promise Resolution Procedure: https://github.com/promises-aplus/promises-spec#the-promise-resolution-procedure */   if (newValue === self) {//傳入值等于自己就拋出錯誤     return reject(       self,       new TypeError('A promise cannot be resolved with itself.')     );   }   if (//值為對象或函數     newValue &&     (typeof newValue === 'object' || typeof newValue === 'function')   ) {     var then = getThen(newValue);//獲取值中的then函數     if (then === IS_ERROR) {//不存在then,reject去       return reject(self, LAST_ERROR);     }     if (//存在并且原來值它是一個promise對象       then === self.then &&       newValue instanceof Promise     ) {//同步兩個promise,將傳入的promise狀態變為已傳遞并把newValue這個promise對象作為promise的值,然后finale并退出函數.       self._state = 3;       self._value = newValue;       finale(self);       return;     } else if (typeof then === 'function') {//如果獲取到then的值不為promise,但then是一個函數(thenable)       doResolve(then.bind(newValue), self);//這里可以看看上個博文,對這個情況有說明,對終值自身進行doResolve取得新的值作為新的終值.       return;     }   }   self._state = 1;//promise狀態為fulfilled   self._value = newValue;//值傳遞   finale(self);//finale了 }

在resolve()中,我們照樣是傳進了一個promise對象和value(終值),函數內部通過標準的判斷(詳細參考學習筆記(二):規范),進行[[Resolve]]操作,***將promise對象狀態變更為fulfilled并改變其終值,調用finale。

finale()

我們可以進行finale()的分析了,畢竟我們的核心函數都指向它呢！

function finale(self) {//傳入了一個promise對象   if (self._deferredState === 1) {//判斷deferreds是單個     handle(self, self._deferreds);//傳入了promise對象和promise對象中的_deferreds     self._deferreds = null;//讓deferreds為null   }   if (self._deferredState === 2) {//判斷deferreds是數組     for (var i = 0; i < self._deferreds.length; i++) {       handle(self, self._deferreds[i]);//傳入了promise對象和promise對象中的_deferreds數組的所有數據     }     self._deferreds = null;//讓deferreds為null   } }

很好,這下都是新的東西了,_deferredState這個就是判斷_deferreds是數組還是單個的情況,并對其中每一個deferred進行handle調用.但是_defferreds又是什么呢,handle()這個函數又做了什么處理呢...

handle()

function handle(self, deferred) {//這個傳入參數是預想之中的   while (self._state === 3) {//promise狀態為3的時候,也就是該promise已傳遞完畢的時候     self = self._value;//重定位self為promise傳遞的值   }   if (Promise._onHandle) {//同樣不屬于本篇考慮范疇     Promise._onHandle(self);   }   if (self._state === 0) {//promise狀態為pending時     if (self._deferredState === 0) {//沒有deferreds時       self._deferredState = 1;//deferreds變為單個       self._deferreds = deferred;傳入deferreds入列       return;     }     if (self._deferredState === 1) {       self._deferredState = 2;//deferreds變為數組       self._deferreds = [self._deferreds, deferred];//傳入deferred進入數組       return;     }     self._deferreds.push(deferred);//已經是數組了就直接push增加     return;   }   handleResolved(self, deferred);//新東西,在state!==0時傳入promise和defered }

可以看到其實這個函數在對_deferreds進行添加,進行著_deferreds的修改和寫入,與finale()所做的事情恰恰相反,但是詳細的處理卻還是在handleResolved()函數里面。

handleResolved()

function handleResolved(self, deferred) {   asap(function() {//注意!asap是一個引入的模塊,意思就是as soon as possible,就是盡快執行的意思,我們不需要考慮它做了什么.     // promise狀態是fulfilled情況下cb為deferred中的Fulfilled函數,不是的話則為onRejected函數...     var cb = self._state === 1 ? deferred.onFulfilled : deferred.onRejected;     if (cb === null) {//如果不存在對應狀態的函數       if (self._state === 1) {//當前promise對象是否為fulfilled狀態         resolve(deferred.promise, self._value);//傳入deferred中保存的promise和當前promise的值進行resolve       } else {         reject(deferred.promise, self._value);//與上類似,進行reject       }       return;     }     var ret = tryCallOne(cb, self._value);//存在則嘗試執行對應函數,返回執行結果(與兩個參數的tryCall不同,這里返回了函數運行結果)     if (ret === IS_ERROR) {//有錯誤,reject       reject(deferred.promise, LAST_ERROR);     } else {//沒錯誤,對deferred.promise用函數返回值進行resolve       resolve(deferred.promise, ret);     }   }); }

這里我們看到了deferred是一個保存了promise對象,onFulfilled函數,onRejected函數的對象,相當于一個保存現場.其實這里就是我們即將在源碼core.js解析(下)寫到的handler對象了.但是這里我們暫且先不深究,知道就好了。

handleResolved()毫無疑問就是在進行著promise的終值傳遞處理,對舊promise對象的狀態修改,并調用resolve和reject獲取到值/拒因向下一個Promise傳遞.對這里的詳細實例分析我們放到(下)來講。

構造一個Promise時發生了啥?

從簡單看起,我們構造一個Promise對象的時候經過了哪些函數。

先理一下思路。

var A = Promise(function(resolve,reject){     resolve("ok"); })

這里面首先是先構造了Promise對象,我們稱為A,在構造階段執行了如下代碼。

檢查略....

A._deferredState = 0; A._state = 0; A._value = null; A._deferreds = null;

檢查傳入參數不為空....

doResolve(function(resolve,reject){     resolve("ok"); },this);

然后我們跳到了doResolve()函數處,傳入為fn,promise

res = tryCallTwo(fn,function(value){resolve(promise, value);},function(reason){reject(promise, reason);}); 出錯就reject(promise,LAST_ERROR)

出錯就reject(promise,LAST_ERROR)

我們又根據我們的輸入跳轉到了resolve(promise,value)啦,這里理一下我們的函數,promise就是A,value其實就是我們傳入的"ok"。

所以執行的是promise內部中的resolve(promise,"ok")

經過一系列判斷(詳細可以看規范),我們的"ok"過五關斬六將直接執行到這一步。

self._state = 1;//A狀態變為fulfilled self._value = newValue;//AA終值變為"ok"

然后我們finale(self)啦,繼續跳到finale()函數,傳入了A.

//在過程中我們的_deferredState始終為0呀,看了一下 A._deferredState = 0; //已經沒有什么好做的了...

感謝各位的閱讀，以上就是“怎么理解Promise中的core.js”的內容了，經過本文的學習后，相信大家對怎么理解Promise中的core.js這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！