<small id="coqwo"></small>

<center id="coqwo"></center>

<strike id="coqwo"></strike>

淺析es6-promise源碼

fox_soyoung 發布于2019-08-23 16:16 / 1306人閱讀

摘要：主要邏輯本質上還是回調函數那一套。通過的判斷完成異步和同步的區分。

主要邏輯:

本質上還是回調函數那一套。
通過_subscribers的判斷完成異步和同步的區分。
通過 resolve，reject -> publish -> invokeCallback -> resolve，reject的遞歸和下一條then的parent是上一條的child來完成then鏈的流轉

同步情況下函數流轉： constructor -> resolver -> publish -> then -> invokeCallback
異步情況下函數流轉： constructor -> then -> resolver -> publish -> invokeCallback

主要函數解析

1. constructor
作用：把resolve，reject綁定到 resolver上-

constructor(resolver) {
    this[PROMISE_ID] = nextId();
    this._result = this._state = undefined;
    this._subscribers = [];
    
    if (noop !== resolver) {
      typeof resolver !== "function" && needsResolver();
      
      this instanceof Promise ? initializePromise(this, resolver) : needsNew();
    }
  }

2 then
作用：把回調函數綁定在_subscribers上，catch和finally本質是then的語法糖
_subscribers的參數是一個數組，[0]是他的child，綁定下一個then鏈的parent，用于publish遞歸調用，第二個是resolve 回調，第三個是reject回調

export default function then(onFulfillment, onRejection) {
  const parent = this;
  
  const child = new this.constructor(noop);

  if (child[PROMISE_ID] === undefined) {
    makePromise(child);
  }

  const { _state } = parent;
 
  if (_state) {
    const callback = arguments[_state - 1];
    asap(() => invokeCallback(_state, child, callback, parent._result));
  } else {
    subscribe(parent, child, onFulfillment, onRejection);
  }

  return child;
}

3 publish
作用： resolve，reject的觸發會調用publish，publish繼續調用invokeCallback，通過返回值繼續調用resolve，reject，形成一個遞歸，完成then鏈的流轉

function publish(promise) {
  let subscribers = promise._subscribers;
  let settled = promise._state;

  if (subscribers.length === 0) { return; }

  let child, callback, detail = promise._result;

  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;
}

tip:
finally的callback是沒有返回參數的，基于

return promise.then(value => constructor.resolve(callback()).then(() => value),
                         reason => constructor.resolve(callback()).then(() => { throw reason; }));

GPU云服務器云服務器源碼淺析 cdn淺析 jdbc連接mysql數據庫的方法淺析源碼站源碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102845.html

es6-promise

摘要：是什么可以理解為一個承諾，如果調用，返回一個承諾給，然后就可以在寫計劃的時候這么寫，當返回結果的時候，就執行方案，如果沒有返回要的結果，就執行方案。這樣一來，所有的潛在風險就都在的可控范圍之內了。 promise是什么 Promise可以理解為一個承諾，如果A調用B，B返回一個承諾給A，然后A就可以在寫計劃的時候這么寫，當B返回結果的時候，A就執行方案1，如果B沒有返回A要的結果，A就...

jackwang 2019-08-21 16:43 評論0 收藏0
使用Vue構建中(大)型應用

摘要：做前端路由管理，一個中大型項目必須要做路由管理做數據管理，類似于的存在，沒有，中大型應用中的狀態會把開發者搞死，絕對。想做SPA就快上車！ init 首先要起一個項目，推薦用vue-cli安裝 $ npm install -g vue-cli $ vue init webpack demo $ cd demo $ npm install demo是這個示例項目的名字現在看到目錄結構...

Rindia 2019-08-19 17:59 評論0 收藏0
淺析webpack源碼之前言（一）

為什么讀webpack源碼因為前端框架離不開webpack，天天都在用的東西啊，怎能不研究讀源碼能學到很多做項目看書學不到的東西，比如說架構，構造函數，es6很邊緣的用法，甚至給函數命名也會潛移默化的影響等想寫源碼，不看源碼怎么行，雖然現在還不知道寫什么，就算不寫什么，看看別人寫的總可以吧知道世界的廣闊，那么多插件，那么多軟件開發師，他們在做什么，同樣是寫js的，怎么他們能這么偉大好奇...

suosuopuo 2019-08-23 14:49 評論0 收藏0
淺析HashMap源碼（1）

摘要：前言本文的目的是閱讀理解的源碼，作為集合中重要的一個角色，平時用到十分多的一個類，深入理解它，知其所以然很重要。前言本文的目的是閱讀理解HashMap的源碼，作為集合中重要的一個角色，平時用到十分多的一個類，深入理解它，知其所以然很重要。本文基于Jdk1.7，因為Jdk1.8改變了HashMap的數據結構，進行了優化，我們先從基礎閱讀，之后再閱讀理解Jdk1.8的內容 HashMa...

wwolf 2019-08-19 11:44 評論0 收藏0
淺析`redux-thunk`中間件源碼

摘要：大多的初學者都會使用中間件來處理異步請求，其理解簡單使用方便具體使用可參考官方文檔。源碼的源碼非常簡潔，出去空格一共只有行，這行中如果不算上則只有行。官方文檔中的一節講解的非常好，也確實幫我理解了中間件的工作原理，非常推薦閱讀。總覺得文章也應該是有生命力的，歡迎關注我的Github上的博客，這里的文章會依據我本人的見識，逐步更新。大多redux的初學者都會使用redux-thunk...

wing324 2019-08-21 17:17 評論0 收藏0