摘要：原理分析一對象用于異步計算。它有兩個參數，分別為在成功和失敗情況下的回調函數。實現根據當前狀態對回調函數進行處理，同時返回一個新的對象，以便鏈式調用。，注冊回調函數到當前的對象中或，立即執行回調函數說明方法只處理被拒絕的情況，并返回一個。

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

Note:

Promise原理分析二

Promise對象有以下幾種狀態:

pending: 初始狀態, 既不是 fulfilled 也不是 rejected.

fulfilled: 成功的操作.

rejected: 失敗的操作.

pending狀態的Promise對象既可轉換為帶著一個成功值的fulfilled狀態，也可變為帶著一個失敗信息的 rejected狀態。當狀態發生轉換時，Promise.then綁定的方法就會被調用。(當綁定方法時，如果 Promise對象已經處于fulfilled或rejected狀態，那么相應的方法將會被立刻調用，所以在異步操作的完成情況和它的綁定方法之間不存在競爭條件。)

因為Promise.prototype.then和Promise.prototype.catch方法返回Promises對象, 所以它們可以被鏈式調用。

語法

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

參數

構造函數主要完成狀態的初始化，并提供resolve和reject兩個方法給創建者以轉變狀態。

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;
    // 初始狀態為pending
    const status = self[SYMBOL_STATUS] = STATUS.PENDING;

    // 使用symbol實現私有化
    self[SYMBOL_FULFILLED_CALLBACK] = undefined;
    self[SYMBOL_REJECTED_CALLBACK] = undefined;
    self[SYMBOL_DATA] = undefined;

    function resovle(value) {
      // todo
    }

    function reject(reason) {
      // todo
    }

    // 執行executor函數，若出現異常則調用reject方法，將狀態變為rejected，同時調用回調函數
    try {
      executor(resovle, reject);
    } catch (err) {
      reject(err);
    }
  }
}

上面代碼中完成了構造函數的雛形，而resolve和reject兩個函數的職責為狀態轉變和回調函數的調用：

resolve，接受一個成功值，傳遞給綁定的fulfilled回調函數中。主要工作是將當前狀態變為fulfilled狀態，同時調用綁定的fulfilled回調函數：

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

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

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

reject，接受一個失敗信息，傳遞給綁定的rejected回調函數中。主要工作是將當前狀態變為rejected 狀態，同時調用綁定的rejected回調函數：

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

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

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

fulfilled`和rejected回調函數是通過Promise.prototype.then和Promise.prototype.catch注冊的。

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

語法

p.then(onFulfilled, onRejected);

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

參數

根據當前狀態對回調函數進行處理，同時返回一個新的Promise對象，以便鏈式調用。

then(onFulfilled, onRejected) {
  const self = this;
  const status = self[SYMBOL_STATUS];
  const data = self[SYMBOL_DATA];
  const resolveValue = self[SYMBOL_RESOLVE_VALUE];
  // 如果onFulfilled不是函數，回調函數僅返回成功值
  const fulfilledCallback = isFunction(onFulfilled)
      ? onFulfilled
      : function returnFunc(value) { return value; };
  // 如果onRejected不是函數，回調函數僅返回失敗信息
  const rejectedCallback = isFunction(onRejected)
      ? onRejected
      : function throwFunc(reason) { throw reason; };
      
  // 當前狀態為pending
  if (status === STATUS.PENDING) {
    // 返回一個新的Promise對象，可以被鏈式調用
    return new Promise((resolve, reject) => {
      // 將fulfilled回調函數注冊到當前Promise對象中（非新Promise對象）
      self[SYMBOL_FULFILLED_CALLBACK] = value => {
        // 根據回調函數的執行情況，通過傳遞的新Promise對象的resolve和reject方法對其狀態進行轉變
        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);
        }
      };
    });
  }

  // 當前狀態為fulfilled
  if (status === STATUS.FULFILLED) {
    // 返回一個新的Promise對象，可以被鏈式調用
    return new Promise((resolve, reject) => {
      // 在下一個事件輪詢中立即調用fulfilled回調函數，根據執行情況決定新Promise對象的狀態轉變
      setTimeout(() => {
        try {
          const newValue = fulfilledCallback(data);
          resolveValue(newValue, resolve, reject);
        } catch (err) {
          reject(err);
        }
      });
    });
  }

  // 當前狀態為rejected
  if (status === STATUS.REJECTED) {
    // 返回一個新的Promise對象，可以被鏈式調用
    return new Promise((resolve, reject) => {
      // 在下一個事件輪詢中立即調用rejected回調函數，根據執行情況決定新Promise對象的狀態轉變
      setTimeout(() => {
        try {
          const newReason = rejectedCallback(data);
          resolveValue(newReason, resolve, reject);
        } catch (err) {
          reject(err);
        }
      });
    });
  }
}

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

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

根據當前Promise對象的狀態，對回調函數進行注冊或立即執行，同時返回一個新的Promise對象。

pending，注冊回調函數到當前的Promise對象中

fulfilled或rejected，立即執行回調函數

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

語法

p.catch(onRejected);

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

參數

catch方法是對then方法的包裝，僅傳遞onRejected失敗回調函數。

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

現在回顧下Promise的實現過程，其主要使用了設計模式中的觀察者模式：

通過Promise.prototype.then和Promise.prototype.catch方法將觀察者方法注冊到被觀察者Promise對象中，同時返回一個新的Promise對象，以便可以鏈式調用。

被觀察者管理內部pending、fulfilled和rejected的狀態轉變，同時通過構造函數中傳遞的resolve和reject方法以主動觸發狀態轉變和通知觀察者。

Promise
MDN
symbol
ruanyifeng
觀察者模式
百度百科