摘要:工作當中經常會用到,在此進行深入學習異步編程解決方案是異步編程的一種解決方案,比傳統的解決方案回調函數和事件更合理和更強大。所有源碼注釋見學習筆記
工作當中經常會用到Promise,在此進行深入學習
異步編程解決方案Promise 是異步編程的一種解決方案,比傳統的解決方案——回調函數和事件——更合理和更強大。它由社區最早提出和實現,ES6 將其寫進了語言標準,統一了用法,原生提供了Promise對象.
關于其他異步方案,有許多精彩的文章,在此不再詳述。接下來直接進入正題。
項目地址This is a polyfill of the ES6 Promise
項目結構
let p = new Promise(function (resolve, reject) { console.log(1); resolve(2); }) p.then(function (val) { console.log(val); })
這是一段簡單實例,讓我們跟著源碼一起看發生了些什么,代碼當中加入了個人理解的注釋。
首先看一下整理后的promise.js
class Promise { constructor (resolver) { this[PROMISE_ID] = nextId(); //生成id this._result = this._state = undefined; this._subscribers = [];//訂閱者 //一般使用時,new時立即執行一次使用者傳入的resolver,印證了一旦promise開始執行無法暫停 if (noop !== resolver) { typeof resolver !== "function" && needsResolver(); this instanceof Promise ? initializePromise(this, resolver) : needsNew();//調用resolver } } catch (onRejection) { return this.then(null, onRejection); } // finally 相當于對當前promise注冊resolve和reject兩種監聽 //如果為 resolve 執行一次cb 然后把原來的value繼續傳遞 finally (callback) { let promise = this; let constructor = promise.constructor; return promise.then(value => constructor.resolve(callback()).then(() => value), reason => constructor.resolve(callback()).then(() => { throw reason; })); } } Promise.prototype.then = then; export default Promise; Promise.all = all; Promise.race = race; Promise.resolve = Resolve; Promise.reject = Reject;
細節均在注釋當中。
這里主要是定義了Promise類和定義了一些方法如then,all等等,那么new Promise()主要是初始化了對象的一些屬性,同時會立即執行resolver,印證了一旦promise開始執行無法暫停。接下來繼續我們的思路,看initializePromise方法發生了什么。
//initializePromise(this, resolver) function initializePromise (promise, resolver) { try { //執行resolver 傳入回調 resolver(function resolvePromise (value) { resolve(promise, value); }, function rejectPromise (reason) { reject(promise, reason); }); } catch (e) { reject(promise, e); } }
這里執行了我們傳入的function,同時也給了使用者resolve和reject函數,由于reject相對簡單,這里我們先看reject如何實現。
// 通用的reject方法 function reject (promise, reason) { if (promise._state !== PENDING) { return; } promise._state = REJECTED; promise._result = reason; asap(publishRejection, promise);//as soon as possible }
reject方法中將promise的對象的狀態設置為rejected,設置了執行的最終結果值result,隨后再asap(調度執行策略)中執行publishRejection,通知通過then方法注冊到_subscribers的訂閱者們,我被reject啦!!,來執行回調,下面是publishRejection方法。
function publishRejection (promise) { if (promise._onerror) { promise._onerror(promise._result); } publish(promise); } //通用的publish function publish (promise) { let subscribers = promise._subscribers; let settled = promise._state; //沒有訂閱者 if (subscribers.length === 0) { return; } let child, callback, detail = promise._result; //這里i+=3 是因為then注冊時 i是promise,i+1是resolve,i+2是reject for (let i = 0; i < subscribers.length; i += 3) { child = subscribers[i]; callback = subscribers[i + settled]; if (child) { invokeCallback(settled, child, callback, detail);//執行回調 } else { callback(detail); } } //通知完畢,清除訂閱 promise._subscribers.length = 0; }
上述就是reject之后的大致流程細節可以看注釋。
讓我們再回到這里:
//initializePromise(this, resolver) function initializePromise (promise, resolver) { try { //執行resolver 傳入回調 resolver(function resolvePromise (value) { resolve(promise, value); }, function rejectPromise (reason) { reject(promise, reason); }); } catch (e) { reject(promise, e); } }
resolve發生了什么呢?
// 通用的resolve方法 繼續傳遞執行 function resolve (promise, value) { if (promise === value) {//如果resolve原對象 reject(promise, selfFulfillment());//設置rejected狀態 } else if (objectOrFunction(value)) {//如果val 是對象或函數 handleMaybeThenable(promise, value, getThen(value));//getThen(value) 獲取val.then方法 } else {//not obj or not fnc fulfill(promise, value);//設置pending result val } }
resolve一個值,這里分了三種情況處理
1、如果resolve原對象,直接reject,拋錯。
2、如果是對象或函數,繼續處理。
3、如果是簡單值,//改變promise 狀態為FULFILLED(完成狀態) 同時設置result,發起publish
如果非要簡單理解,resolve就是不斷抽絲剝繭的處理直到給promise一個確定的完成態或拒絕態
fulfill方法比較簡單,asap下文介紹
//改變promise 狀態為FULFILLED(完成狀態) 同時設置result function fulfill (promise, value) { if (promise._state !== PENDING) { return; } promise._result = value; promise._state = FULFILLED; if (promise._subscribers.length !== 0) {//通知 asap(publish, promise); } }
這里重點看handleMaybeThenable方法
/*maybeThenable:value;then:value.then*/ function handleMaybeThenable (promise, maybeThenable, then) {//thenable obj or promise /* originalThen : 定義的原始then;originalResolve:原始resolve*/ if (maybeThenable.constructor === promise.constructor && //判斷是否是promise且沒經修改原生方法 then === originalThen && maybeThenable.constructor.resolve === originalResolve) { handleOwnThenable(promise, maybeThenable);//maybeThenable是一個原生的promise } else {//maybeThenable if (then === TRY_CATCH_ERROR) {// getThen 拋錯 reject(promise, TRY_CATCH_ERROR.error); TRY_CATCH_ERROR.error = null;//釋放引用 } else if (then === undefined) {//若不是一個thenable,直接完成態 fulfill(promise, maybeThenable); } else if (isFunction(then)) {//若是一個thenable handleForeignThenable(promise, maybeThenable, then); } else {//若不是一個thenable,直接完成態 fulfill(promise, maybeThenable);//改變promise 狀態為完成態 同時設置result } } }
這里就對傳入的值做了詳細區分
若是原生Promise對象:若是fulfilled或rejected,直接發起publish,如果是pending狀態,調用then來注冊訂閱回調。
若是thenable:特殊處理handleForeignThenable
"其他fulfill或reject
這里看一下handleForeignThenable方法
/* * thenable 是函數,有then方法 * */ //handleForeignThenable(promise, maybeThenable, then); function handleForeignThenable (promise, thenable, then) { asap(promise => {//asap這里默認分析 setTimeout(fn,0) 下一輪任務開始時執行 var sealed = false;//是否有結果 //value:thenable傳入的參數 ,嘗試執行 var error = tryThen(then, thenable, value => {//fullfill時, if (sealed) { return; } sealed = true; if (thenable !== value) {//如果不是直接resolve原對象 resolve(promise, value);//繼續對resolve的val進行resolve處理 } else { fulfill(promise, value); } }, reason => {//reject if (sealed) { return; } sealed = true; reject(promise, reason); }, "Settle: " + (promise._label || " unknown promise")); if (!sealed && error) {//拋錯 未正常執行resolve reject sealed = true; reject(promise, error); } }, promise); }
看起來比較亂,但思路比較簡單,這里就對thenable進行嘗試執行,如果返回結果正常就繼續resolve處理直到解析出一個值,否則拋錯等等。
Then上文說到了很多訂閱啦,publish啦,訂閱時哪里來的呢,上文只看到了每次執行完狀態改變的時候要publish,publish給誰呢,then方法會給出答案
export default function then (onFulfillment, onRejection) { const parent = this; //新建一個不執行的promise對象用于返回結果,可鏈式調用 const child = new this.constructor(noop); if (child[PROMISE_ID] === undefined) {//TODO makePromise(child);//初始化基本的promie 屬性 } //promise state const {_state} = parent; if (_state) {// 如果狀態已完成或已拒絕,無需訂閱,直接執行回調返回結果,印證了一旦promise有了結果無法再次改變 const callback = arguments[_state - 1]; asap(() => invokeCallback(_state, child, callback, parent._result)); } else {//訂閱來注冊回調 subscribe(parent, child, onFulfillment, onRejection); } //then reuturn的新promise return child; }
這里情況分兩種
已完成或已拒絕:直接執行回調返回結果,印證了一旦promise有了結果無法再次改變
pending未完成:訂閱來注冊回調
這里先看invokeCallback方法。
//asap(() => invokeCallback(_state, child, callback, parent._result)); //執行回調: function invokeCallback (settled, promise, callback, detail) { let hasCallback = isFunction(callback), value, error, succeeded, failed; if (hasCallback) { value = tryCatch(callback, detail);//嘗試執行使用者then()傳入的回調,成功時value 是then()注冊的回調方法的返回值 if (value === TRY_CATCH_ERROR) { failed = true; error = value.error; value.error = null; } else { succeeded = true; } if (promise === value) {//若return this reject(promise, cannotReturnOwn()); return; } } else {// then 未傳入相關回調,繼續傳遞 value = detail; succeeded = true; } if (promise._state !== PENDING) { // noop } else if (hasCallback && succeeded) { resolve(promise, value);//value 可能為thenable,繼續處理,抽絲剝繭 } else if (failed) {//有cb 且失敗 reject(promise, error); } else if (settled === FULFILLED) {//無cb fulfill(promise, value); } else if (settled === REJECTED) {//無cb reject(promise, value); } }
接下來是重要的subscribe方法。
/* * parent:thenable * child : undefined or other * */ //subscribe(parent, child, onFulfillment, onRejection); //如果promise仍是pending,則將回調函數加入_subscribers等待通知 function subscribe (parent, child, onFulfillment, onRejection) { let {_subscribers} = parent;//取注冊的所有訂閱 let {length} = _subscribers; parent._onerror = null; _subscribers[length] = child;//擴充訂閱 3個一循環 _subscribers[length + FULFILLED] = onFulfillment; _subscribers[length + REJECTED] = onRejection; /* * 1、如果之前有訂閱且狀態是pending, 訂閱就好了,等待resolve完成時的發布通知執行就好 * 2、如果之前有訂閱且狀態不是pending,繼續加入訂閱就好,length=0時已經準備調度發布了,pulish執行時會清空 * 3、如果之前無訂閱且狀態是pending,訂閱就好了,等待resolve完成時的發布通知執行就好 * 4、如下,趕緊調度執行獲取結果 * */ if (length === 0 && parent._state) {//如果之前沒有訂閱且thenable已不是pending, asap(publish, parent); } }
上面就是訂閱的過程,主要是利用的js單線程的特性,且需要和fuifill和reject執行時發布publish一起理解.
下面是asap方法
//下一輪事件循環執行 export var asap = function asap (callback, arg) { queue[len] = callback;//2個一組 queue[len + 1] = arg; len += 2; if (len === 2) { /* 如果隊列長度是2 ,那意味著我們需要調度一次隊列flush, 如果隊列flush完成前有其他的回調進入隊列,這些進入的回調會在當前已調度的flush執行 * */ // If len is 2, that means that we need to schedule(調度) an async flush. // If additional callbacks are queued before the queue is flushed, they // will be processed by this flush that we are scheduling. if (customSchedulerFn) { customSchedulerFn(flush); } else {//一般默認 scheduleFlush(); } } } function flush () { for (let i = 0; i < len; i += 2) { let callback = queue[i]; let arg = queue[i + 1]; callback(arg); queue[i] = undefined; queue[i + 1] = undefined; } len = 0;//邏輯清空隊列 }
本文默認分析采用的調度策略時setTimeout方法,asap里維護了一個執行隊列queue。這里涉及到了一些
js異步編程機制,推薦閱讀從瀏覽器多進程到JS單線程,JS運行機制最全面的一次梳理
本文主要是跟著源碼的思路簡單過了一遍代碼,加入了個人的理解。同時還有一些如Promise.all等等方法將在下篇一起分析。
閱讀代碼前,也學習了阮一峰老師關于Promise的文章,在此一并感謝。
所有源碼注釋見promise學習筆記
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94256.html
摘要:源碼學習本篇為上一篇源碼學習的補充,主要是來介紹和方法。那個率先改變的實例的返回值,就傳遞給的回調函數。基本介紹可見阮一峰老師的書籍。的狀態由決定,分成兩種情況。只有的狀態都變成,的狀態才會變成,此時的返回值組成一個數組,傳遞給的回調函數。 Promise源碼學習(2) 本篇為上一篇源碼學習(1)的補充,主要是來介紹Promise.all()和Promise.race()方法。閑話少敘...
摘要:源碼閱讀階段緊接上一篇這次我們開始我們最常用到的部分的源碼解析傳入參數為兩個函數和判斷調用者是否為對象跳轉到了一個叫做的函數里面新建一個對象傳入函數傳入給和一個新的對象返回新的對象在這里我們先看看在調用者不是對象時到底做了什么比想象的要簡單 源碼閱讀階段 緊接上一篇,這次我們開始Promise我們最常用到的then部分的源碼解析. then() //傳入參數為兩個函數,onFulfil...
摘要:源碼閱讀階段先理解根本吧想快點理解的話可以直接跳到下個標題這部分根據理解將持續修改空函數用于判斷傳入構造器的函數是否為空函數如果為空函數構造一個對象并初始化狀態為終值回調狀態和隊列記錄內部最后的一次錯誤空對象標識表示發生了錯誤暴露模塊接口為 源碼閱讀階段 先理解Promise根本吧,想快點理解的話可以直接跳到下個標題.這部分根據理解將持續修改. Promise(fn) function...
摘要:第三篇腳手架依賴的核心庫的源碼解析。該篇是這個系列文章的第三篇主要是對的源碼進行分析講解。的源碼十分簡單但實現的功能卻是十分的強大。源碼概括源碼主要包含了兩部分公共方法和私有方法。 react作為當前十分流行的前端框架,相信很多前端er都有蠢蠢欲動的學習它的想法。工欲善其事,必先利其器。這篇文章就簡單的給大家介紹一下如何我快速的搭建一個react前端開發環境。主要針對于react小白,...
摘要:下一篇大概就是源碼方面的學習筆記了龜速學習中這一次我是去看了下規范照例傳送門圖靈社區規范首先吧個人總結下該用的詞解決結婚拒絕婉拒終值值傳家寶拒因好人卡等等異常車禍理下概念我們的的就像是一場姻緣對吧解決呢就是結婚成功啦傳家寶也如愿的傳給下一代 下一篇大概就是源碼方面的學習筆記了...龜速學習中... 這一次我是去看了下Promises/A+規范照例傳送門:圖靈社區Promises/A+規...
閱讀 1258·2021-11-19 09:40
閱讀 3117·2021-11-02 14:47
閱讀 3050·2021-10-11 10:58
閱讀 3216·2019-08-30 15:54
閱讀 2666·2019-08-30 12:50
閱讀 1721·2019-08-29 16:54
閱讀 462·2019-08-29 15:38
閱讀 1237·2019-08-29 15:19