Promise原理分析一

WilsonLiu95 發(fā)布于2019-08-20 11:04 / 972人閱讀

摘要：原理分析一對象用于異步計算。它有兩個參數(shù)，分別為在成功和失敗情況下的回調(diào)函數(shù)。實(shí)現(xiàn)根據(jù)當(dāng)前狀態(tài)對回調(diào)函數(shù)進(jìn)行處理，同時返回一個新的對象，以便鏈?zhǔn)秸{(diào)用。，注冊回調(diào)函數(shù)到當(dāng)前的對象中或，立即執(zhí)行回調(diào)函數(shù)說明方法只處理被拒絕的情況，并返回一個。

Promise原理分析一

Promise對象用于異步計算。一個Promise對象代表著一個還未完成，但預(yù)期將來會完成的操作。

Note:

Promise原理分析二

Promise對象有以下幾種狀態(tài):

pending: 初始狀態(tài), 既不是 fulfilled 也不是 rejected.

fulfilled: 成功的操作.

rejected: 失敗的操作.

pending狀態(tài)的Promise對象既可轉(zhuǎn)換為帶著一個成功值的fulfilled狀態(tài)，也可變?yōu)閹е粋€失敗信息的 rejected狀態(tài)。當(dāng)狀態(tài)發(fā)生轉(zhuǎn)換時，Promise.then綁定的方法就會被調(diào)用。(當(dāng)綁定方法時，如果 Promise對象已經(jīng)處于fulfilled或rejected狀態(tài)，那么相應(yīng)的方法將會被立刻調(diào)用，所以在異步操作的完成情況和它的綁定方法之間不存在競爭條件。)

因?yàn)镻romise.prototype.then和Promise.prototype.catch方法返回Promises對象, 所以它們可以被鏈?zhǔn)秸{(diào)用。

constructor 說明

語法

new Promise(executor);
new Promise(function(resolve, reject) { ... });

參數(shù)

name	desc
executor	帶有resolve、reject兩個參數(shù)的函數(shù)對象。第一個參數(shù)用在處理執(zhí)行成功的場景，第二個參數(shù)則用在處理執(zhí)行失敗的場景。一旦我們的操作完成即可調(diào)用這些函數(shù)。

實(shí)現(xiàn)

構(gòu)造函數(shù)主要完成狀態(tài)的初始化，并提供resolve和reject兩個方法給創(chuàng)建者以轉(zhuǎn)變狀態(tài)。

const utils = require("./utils");
const isFunction = utils.isFunction;

const STATUS = {
  PENDING: "pending",
  FULFILLED: "fulfilled",
  REJECTED: "rejected"
};

const SYMBOL_STATUS = Symbol("status");
const SYMBOL_DATA = Symbol("data");
const SYMBOL_FULFILLED_CALLBACK = Symbol("fulfilledCallback");
const SYMBOL_REJECTED_CALLBACK = Symbol("rejectedCallback");

class Promise {
  constructor(executor) {
    if (!isFunction(executor)) {
      throw Error(`Promise executor ${executor} is not a function`);
    }

    const self = this;
    // 初始狀態(tài)為pending
    const status = self[SYMBOL_STATUS] = STATUS.PENDING;

    // 使用symbol實(shí)現(xiàn)私有化
    self[SYMBOL_FULFILLED_CALLBACK] = undefined;
    self[SYMBOL_REJECTED_CALLBACK] = undefined;
    self[SYMBOL_DATA] = undefined;

    function resovle(value) {
      // todo
    }

    function reject(reason) {
      // todo
    }

    // 執(zhí)行executor函數(shù)，若出現(xiàn)異常則調(diào)用reject方法，將狀態(tài)變?yōu)閞ejected，同時調(diào)用回調(diào)函數(shù)
    try {
      executor(resovle, reject);
    } catch (err) {
      reject(err);
    }
  }
}

上面代碼中完成了構(gòu)造函數(shù)的雛形，而resolve和reject兩個函數(shù)的職責(zé)為狀態(tài)轉(zhuǎn)變和回調(diào)函數(shù)的調(diào)用：

resolve，接受一個成功值，傳遞給綁定的fulfilled回調(diào)函數(shù)中。主要工作是將當(dāng)前狀態(tài)變?yōu)?b>fulfilled狀態(tài)，同時調(diào)用綁定的fulfilled回調(diào)函數(shù)：

function resovle(value) {
  const fulfilledCallback = self[SYMBOL_FULFILLED_CALLBACK];

  if (status === STATUS.PENDING) {
    self[SYMBOL_STATUS] = STATUS.FULFILLED;  // 狀態(tài)轉(zhuǎn)換
    self[SYMBOL_DATA] = value;  // 保存成功值

    if (isFunction(fulfilledCallback)) {
      setTimeout(() => {  // 不阻塞主流程，在下一個事件輪詢中再調(diào)用fulfilled回調(diào)函數(shù)
        fulfilledCallback(value);
      });
    }
  }
}

reject，接受一個失敗信息，傳遞給綁定的rejected回調(diào)函數(shù)中。主要工作是將當(dāng)前狀態(tài)變?yōu)?b>rejected 狀態(tài)，同時調(diào)用綁定的rejected回調(diào)函數(shù)：

function reject(reason) {
  const rejectedCallback = self[SYMBOL_REJECTED_CALLBACK];

  if (status === STATUS.PENDING) {
    self[SYMBOL_STATUS] = STATUS.REJECTED;  // 狀態(tài)轉(zhuǎn)換
    self[SYMBOL_DATA] = reason;  // 保存成功值

    if (isFunction(rejectedCallback)) {
      setTimeout(() => {  // 不阻塞主流程，在下一個事件輪詢中再調(diào)用rejected回調(diào)函數(shù)
        rejectedCallback(reason);
      });
    }
  }
}

fulfilled`和rejected回調(diào)函數(shù)是通過Promise.prototype.then和Promise.prototype.catch注冊的。

then 說明

then方法返回一個Promise。它有兩個參數(shù)，分別為Promise在成功和失敗情況下的回調(diào)函數(shù)。

語法

p.then(onFulfilled, onRejected);

p.then(function(value) {
  // todo
}, function(reason) {
  // todo
});

參數(shù)

name	desc
onFulfilled	一個函數(shù)，當(dāng)Promise的狀態(tài)為fulfilled時調(diào)用。該函數(shù)有一個參數(shù)，為成功的返回值。
onRejected	一個函數(shù)，當(dāng)Promise的狀態(tài)為rejected時調(diào)用。該函數(shù)有一個參數(shù)，為失敗的原因。

實(shí)現(xiàn)

根據(jù)當(dāng)前狀態(tài)對回調(diào)函數(shù)進(jìn)行處理，同時返回一個新的Promise對象，以便鏈?zhǔn)秸{(diào)用。

then(onFulfilled, onRejected) {
  const self = this;
  const status = self[SYMBOL_STATUS];
  const data = self[SYMBOL_DATA];
  const resolveValue = self[SYMBOL_RESOLVE_VALUE];
  // 如果onFulfilled不是函數(shù)，回調(diào)函數(shù)僅返回成功值
  const fulfilledCallback = isFunction(onFulfilled)
      ? onFulfilled
      : function returnFunc(value) { return value; };
  // 如果onRejected不是函數(shù)，回調(diào)函數(shù)僅返回失敗信息
  const rejectedCallback = isFunction(onRejected)
      ? onRejected
      : function throwFunc(reason) { throw reason; };
      
  // 當(dāng)前狀態(tài)為pending
  if (status === STATUS.PENDING) {
    // 返回一個新的Promise對象，可以被鏈?zhǔn)秸{(diào)用
    return new Promise((resolve, reject) => {
      // 將fulfilled回調(diào)函數(shù)注冊到當(dāng)前Promise對象中（非新Promise對象）
      self[SYMBOL_FULFILLED_CALLBACK] = value => {
        // 根據(jù)回調(diào)函數(shù)的執(zhí)行情況，通過傳遞的新Promise對象的resolve和reject方法對其狀態(tài)進(jìn)行轉(zhuǎn)變
        try {
          const newValue = fulfilledCallback(value);
          // 解析成功值
          resolveValue(newValue, resolve, reject);
        } catch (err) {
          reject(err);
        }
      };

      // 同上
      self[SYMBOL_REJECTED_CALLBACK] = reason => {
        try {
          const newReason = rejectedCallback(reason);
          resolveValue(newReason, resolve, reject);
        } catch (err) {
          reject(err);
        }
      };
    });
  }

  // 當(dāng)前狀態(tài)為fulfilled
  if (status === STATUS.FULFILLED) {
    // 返回一個新的Promise對象，可以被鏈?zhǔn)秸{(diào)用
    return new Promise((resolve, reject) => {
      // 在下一個事件輪詢中立即調(diào)用fulfilled回調(diào)函數(shù)，根據(jù)執(zhí)行情況決定新Promise對象的狀態(tài)轉(zhuǎn)變
      setTimeout(() => {
        try {
          const newValue = fulfilledCallback(data);
          resolveValue(newValue, resolve, reject);
        } catch (err) {
          reject(err);
        }
      });
    });
  }

  // 當(dāng)前狀態(tài)為rejected
  if (status === STATUS.REJECTED) {
    // 返回一個新的Promise對象，可以被鏈?zhǔn)秸{(diào)用
    return new Promise((resolve, reject) => {
      // 在下一個事件輪詢中立即調(diào)用rejected回調(diào)函數(shù)，根據(jù)執(zhí)行情況決定新Promise對象的狀態(tài)轉(zhuǎn)變
      setTimeout(() => {
        try {
          const newReason = rejectedCallback(data);
          resolveValue(newReason, resolve, reject);
        } catch (err) {
          reject(err);
        }
      });
    });
  }
}

// 解析傳遞值函數(shù)
[SYMBOL_RESOLVE_VALUE](value, resolve, reject) {
  // 若傳遞值為Promise對象，將新Promise對象的resolve和reject傳遞給Promise傳遞值以觸發(fā)狀態(tài)的轉(zhuǎn)換
  if (value instanceof Promise) {
    value.then(resolve, reject);
    return;
  }

  // 若傳遞值不是Promise對象，傳遞給resolve方法
  resolve(value);
}

根據(jù)當(dāng)前Promise對象的狀態(tài)，對回調(diào)函數(shù)進(jìn)行注冊或立即執(zhí)行，同時返回一個新的Promise對象。

pending，注冊回調(diào)函數(shù)到當(dāng)前的Promise對象中

fulfilled或rejected，立即執(zhí)行回調(diào)函數(shù)

catch 說明

catch方法只處理Promise被拒絕的情況，并返回一個Promise。該方法的行為和調(diào)用Promise.prototype.then(undefined, onRejected)相同。

語法

p.catch(onRejected);

p.catch(function(reason) {
   // todo
});

參數(shù)

name	desc
onRejected	當(dāng)Promise被拒絕時調(diào)用的函數(shù)。該函數(shù)調(diào)用時會傳入一個參數(shù)：失敗原因。

實(shí)現(xiàn)

catch方法是對then方法的包裝，僅傳遞onRejected失敗回調(diào)函數(shù)。

catch(onRejected) {
  return this.then(null, onRejected);
}

總結(jié)

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

通過Promise.prototype.then和Promise.prototype.catch方法將觀察者方法注冊到被觀察者Promise對象中，同時返回一個新的Promise對象，以便可以鏈?zhǔn)秸{(diào)用。

被觀察者管理內(nèi)部pending、fulfilled和rejected的狀態(tài)轉(zhuǎn)變，同時通過構(gòu)造函數(shù)中傳遞的resolve和reject方法以主動觸發(fā)狀態(tài)轉(zhuǎn)變和通知觀察者。

關(guān)鍵知識點(diǎn)

Promise

MDN

symbol

ruanyifeng

觀察者模式

百度百科

資源 完整代碼

GPU云服務(wù)器云服務(wù)器 js跨域原理分析語音降噪圖形分析原理webrtc promise Promise使用

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80384.html

發(fā)表評論

登陸后可評論

0條評論

WilsonLiu95

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 3392·2023-04-26 01:40
實(shí)現(xiàn)初階掃雷

閱讀 3094·2021-11-24 09:39
#萬圣節(jié)#friendhosting，9個數(shù)據(jù)中心的VPS 5折促銷，可自定義ISO，不限流量，支持

閱讀 1403·2021-10-27 14:19
90后的軟件測試工程師，現(xiàn)在都怎樣了？

閱讀 2649·2021-10-12 10:11
無線測溫傳感器、無線測溫裝置在項(xiàng)目上的應(yīng)用—安科瑞孫斌

閱讀 1311·2021-09-26 09:47
云主機(jī)怎么裝網(wǎng)站-怎么在云主機(jī)上搭建網(wǎng)站？

閱讀 1849·2021-09-22 15:21
cubemx配置stm32(三)__GPIO的輸入輸出

閱讀 2718·2021-09-06 15:00
ShineServers：全線產(chǎn)品優(yōu)惠15%/美國服務(wù)器/荷蘭服務(wù)器月付$ 69.40/月起

閱讀 899·2021-08-10 09:44

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Promise原理分析一

相關(guān)文章

Promise原理分析二

原理剖析（第 011 篇）Netty之服務(wù)端啟動工作原理分析(下)

promise/deferred 模式原理分析和實(shí)現(xiàn)

**js異步發(fā)展歷史與Promise原理分析**

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

發(fā)表評論

0條評論

WilsonLiu95

男|高級講師

TA的文章

tensorflow

實(shí)現(xiàn)初階掃雷

#萬圣節(jié)#friendhosting，9個數(shù)據(jù)中心的VPS 5折促銷，可自定義ISO，不限流量，支持

90后的軟件測試工程師，現(xiàn)在都怎樣了？

無線測溫傳感器、無線測溫裝置在項(xiàng)目上的應(yīng)用—安科瑞孫斌

云主機(jī)怎么裝網(wǎng)站-怎么在云主機(jī)上搭建網(wǎng)站？

cubemx配置stm32(三)__GPIO的輸入輸出

ShineServers：全線產(chǎn)品優(yōu)惠15%/美國服務(wù)器/荷蘭服務(wù)器月付$ 69.40/月起

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Promise原理分析一

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！