Promise 基本用法及實現原理

Promise 基本用法及實現原理

一、promise 是什么？

Promise 是異步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大。Promise 是一個對象，從它可以獲取異步操作的消息。

1.1、promise的兩個特點：

（1）對象的狀態不受外界影響。Promise對象代表一個異步操作，有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗）。

（2）一旦狀態改變，就不會再變，任何時候都可以得到這個結果。Promise對象的狀態改變，只有兩種可能：從pending變為fulfilled和從pending變為rejected。

promise的基本用法：

ES6 規定，Promise對象是一個構造函數，用來生成Promise實例。

const promise = new Promise(function(resolve, reject) {
 if (/* 異步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise實例生成以后，可以用then方法分別指定resolved狀態和rejected狀態的回調函數。

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

then方法可以接受兩個回調函數作為參數。第一個回調函數是Promise對象的狀態變為resolved時調用，第二個回調函數是Promise對象的狀態變為rejected時調用。其中，第二個函數是可選的，不一定要提供。

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done');
  });
}

timeout(100).then((value) => {
  console.log(value);
});

Promise 新建后就會立即執行。

let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

console.log('Hi!');

// Promise
// Hi!
// resolved

下面是一個用Promise對象實現的 Ajax 操作的例子。

const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

  });

  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出錯了', error);
});

 

const p1 = new Promise(function (resolve, reject) {
  setTimeout(() => reject(new Error('fail')), 3000)
})

const p2 = new Promise(function (resolve, reject) {
  setTimeout(() => resolve(p1), 1000)
})

p2
  .then(result => console.log(result))
  .catch(error => console.log(error))
// Error: fail

上面代碼中，p1是一個 Promise，3 秒之后變為rejected。p2的狀態在 1 秒之后改變，resolve方法返回的是p1。由於p2返回的是另一個 Promise，導致p2自己的狀態無效了，由p1的狀態決定p2的狀態。所以，后面的then語句都變成針對后者（p1）。又過了 2 秒，p1變為rejected，導致觸發catch方法指定的回調函數。

 

1.2、Promise.prototype.then()

promise 實例具有then方法，也就是說，then方法是定義在原型對象Promise.prototype上的。它的作用是為 Promise 實例添加狀態改變時的回調函數。前面說過，then方法的第一個參數是resolved狀態的回調函數，第二個參數（可選）是rejected狀態的回調函數

getJSON("/posts.json").then(function(json) {
  return json.post;
}).then(function(post) {
  // ...
});

getJSON("/post/1.json").then(
  post => getJSON(post.commentURL)
).then(
  comments => console.log("resolved: ", comments),
  err => console.log("rejected: ", err)
);

上面代碼中，第一個then方法指定的回調函數，返回的是另一個Promise對象。這時，第二個then方法指定的回調函數，就會等待這個新的Promise對象狀態發生變化。如果變為resolved，就調用第一個回調函數，如果狀態變為rejected，就調用第二個回調函數。

1.3、Promise.prototype.catch()

Promise.prototype.catch()方法是.then(null, rejection)或.then(undefined, rejection)的別名，用於指定發生錯誤時的回調函數

p.then((val) => console.log('fulfilled:', val))
  .catch((err) => console.log('rejected', err));

// 等同於
p.then((val) => console.log('fulfilled:', val))
  .then(null, (err) => console.log("rejected:", err));

 

1.4、Promise.all()

方法用於將多個 Promise 實例，包裝成一個新的 Promise 實例。

const p = Promise.all([p1, p2, p3]);

上面代碼中，Promise.all()方法接受一個數組作為參數，p1、p2、p3都是 Promise 實例，如果不是，就會先調用下面講到的Promise.resolve方法，將參數轉為 Promise 實例，再進一步處理。另外，Promise.all()方法的參數可以不是數組，但必須具有 Iterator 接口，且返回的每個成員都是 Promise 實例。

p的狀態由p1、p2、p3決定，分成兩種情況。

（1）只有p1、p2、p3的狀態都變成fulfilled，p的狀態才會變成fulfilled，此時p1、p2、p3的返回值組成一個數組，傳遞給p的回調函數。

（2）只要p1、p2、p3之中有一個被rejected，p的狀態就變成rejected，此時第一個被reject的實例的返回值，會傳遞給p的回調函數。

const p1 = new Promise((resolve, reject) => {
  resolve('hello');
})
.then(result => result)
.catch(e => e);

const p2 = new Promise((resolve, reject) => {
  throw new Error('報錯了');
})
.then(result => result)
.catch(e => e);

Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// ["hello", Error: 報錯了]

上面代碼中，p1會resolved，p2首先會rejected，但是p2有自己的catch方法，該方法返回的是一個新的 Promise 實例，p2指向的實際上是這個實例。該實例執行完catch方法后，也會變成resolved，導致Promise.all()方法參數里面的兩個實例都會resolved，因此會調用then方法指定的回調函數，而不會調用catch方法指定的回調函數。

如果p2沒有自己的catch方法，就會調用Promise.all()的catch方法。

1.5、Promise.race()

方法同樣是將多個 Promise 實例，包裝成一個新的 Promise 實例。

 

const p = Promise.race([p1, p2, p3]);

上面代碼中，只要p1、p2、p3之中有一個實例率先改變狀態，p的狀態就跟着改變。那個率先改變的 Promise 實例的返回值，就傳遞給p的回調函數。

const p = Promise.race([
  fetch('/resource-that-may-take-a-while'),
  new Promise(function (resolve, reject) {
    setTimeout(() => reject(new Error('request timeout')), 5000)
  })
]);

p
.then(console.log)
.catch(console.error);

上面代碼中，如果 5 秒之內fetch方法無法返回結果，變量p的狀態就會變為rejected，從而觸發catch方法指定的回調函數。

二、Promise實現原理

2.1、promise基本結構

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('FULFILLED')
  }, 1000)
})

構造函數Promise必須接受一個函數作為參數，我們稱該函數為handle，handle又包含resolve和reject兩個參數，它們是兩個函數。

// 判斷變量否為function
const isFunction = variable => typeof variable === 'function'

首先，我們定義一個名為 MyPromise 的 Class，它接受一個函數 handle 作為參數

class MyPromise {
  constructor (handle) {
    if (!isFunction(handle)) {
      throw new Error('MyPromise must accept a function as a parameter')
    }
  }
}

 

2.2、Promise 狀態和值

狀態只能由 Pending 變為 Fulfilled 或由 Pending 變為 Rejected ，且狀態改變之后不會在發生變化，會一直保持這個狀態。

/ 定義Promise的三種狀態常量
const PENDING = 'PENDING'
const FULFILLED = 'FULFILLED'
const REJECTED = 'REJECTED'

再為 MyPromise 添加狀態和值，並添加狀態改變的執行邏輯

class MyPromise {
  constructor (handle) {
    if (!isFunction(handle)) {
      throw new Error('MyPromise must accept a function as a parameter')
    }
    // 添加狀態
    this._status = PENDING
    // 添加狀態
    this._value = undefined
    // 執行handle
    try {
      handle(this._resolve.bind(this), this._reject.bind(this)) 
    } catch (err) {
      this._reject(err)
    }
  }
  // 添加resovle時執行的函數
  _resolve (val) {
    if (this._status !== PENDING) return
    this._status = FULFILLED
    this._value = val
  }
  // 添加reject時執行的函數
  _reject (err) { 
    if (this._status !== PENDING) return
    this._status = REJECTED
    this._value = err
  }
}

2.3、Promise 的 then 方法

Promise 對象的 then 方法接受兩個參數：

參數可選

onFulfilled 和 onRejected 都是可選參數。

如果 onFulfilled 或 onRejected 不是函數，其必須被忽略
onFulfilled 特性

    如果 onFulfilled 是函數：

當 promise 狀態變為成功時必須被調用，其第一個參數為 promise 成功狀態傳入的值（ resolve 執行時傳入的值）
在 promise 狀態改變前其不可被調用
其調用次數不可超過一次
onRejected 特性
    如果 onRejected 是函數：

當 promise 狀態變為失敗時必須被調用，其第一個參數為 promise 失敗狀態傳入的值（ reject 執行時傳入的值）
在 promise 狀態改變前其不可被調用
其調用次數不可超過一次

多次調用
    then 方法可以被同一個 promise 對象調用多次

當 promise 成功狀態時，所有 onFulfilled 需按照其注冊順序依次回調
當 promise 失敗狀態時，所有 onRejected 需按照其注冊順序依次回調

返回

then 方法必須返回一個新的 promise 對象

promise2 = promise1.then(onFulfilled, onRejected);

因此 promise 支持鏈式調用

promise1.then(onFulfilled1, onRejected1).then(onFulfilled2, onRejected2);

因此 promise 支持鏈式調用

promise1.then(onFulfilled1, onRejected1).then(onFulfilled2, onRejected2);
這里涉及到 Promise 的執行規則，包括“值的傳遞”和“錯誤捕獲”機制：
1、如果 onFulfilled 或者 onRejected 返回一個值 x ，則運行下面的 Promise 解決過程：[[Resolve]](promise2, x)

若 x 不為 Promise ，則使 x 直接作為新返回的 Promise 對象的值， 即新的onFulfilled 或者 onRejected 函數的參數.
若 x 為 Promise ，這時后一個回調函數，就會等待該 Promise 對象(即 x )的狀態發生變化，才會被調用，並且新的 Promise 狀態和 x 的狀態相同

let promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve()
  }, 1000)
})
promise2 = promise1.then(res => {
  // 返回一個普通值
  return '這里返回一個普通值'
})
promise2.then(res => {
  console.log(res) //1秒后打印出：這里返回一個普通值
})

let promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve()
  }, 1000)
})
promise2 = promise1.then(res => {
  // 返回一個Promise對象
  return new Promise((resolve, reject) => {
    setTimeout(() => {
     resolve('這里返回一個Promise')
    }, 2000)
  })
})
promise2.then(res => {
  console.log(res) //3秒后打印出：這里返回一個Promise
})

2、如果 onFulfilled 或者onRejected 拋出一個異常 e ，則 promise2 必須變為失敗（Rejected），並返回失敗的值 e，例如：

let promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  }, 1000)
})
promise2 = promise1.then(res => {
  throw new Error('這里拋出一個異常e')
})
promise2.then(res => {
  console.log(res)
}, err => {
  console.log(err) //1秒后打印出：這里拋出一個異常e
})

3、如果onFulfilled 不是函數且 promise1 狀態為成功（Fulfilled）， promise2 必須變為成功（Fulfilled）並返回 promise1 成功的值，例如：

let promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  }, 1000)
})
promise2 = promise1.then('這里的onFulfilled本來是一個函數，但現在不是')
promise2.then(res => {
  console.log(res) // 1秒后打印出：success
}, err => {
  console.log(err)
})

4、如果 onRejected 不是函數且 promise1 狀態為失敗（Rejected），promise2必須變為失敗（Rejected） 並返回 promise1 失敗的值，例如

let promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('fail')
  }, 1000)
})
promise2 = promise1.then(res => res, '這里的onRejected本來是一個函數，但現在不是')
promise2.then(res => {
  console.log(res)
}, err => {
  console.log(err)  // 1秒后打印出：fail
})

 

根據上面的規則，我們來為 完善 MyPromise

修改 constructor : 增加執行隊列

由於 then 方法支持多次調用，我們可以維護兩個數組，將每次 then 方法注冊時的回調函數添加到數組中，等待執行

constructor (handle) {
  if (!isFunction(handle)) {
    throw new Error('MyPromise must accept a function as a parameter')
  }
  // 添加狀態
  this._status = PENDING
  // 添加狀態
  this._value = undefined
  // 添加成功回調函數隊列
  this._fulfilledQueues = []
  // 添加失敗回調函數隊列
  this._rejectedQueues = []
  // 執行handle
  try {
    handle(this._resolve.bind(this), this._reject.bind(this)) 
  } catch (err) {
    this._reject(err)
  }
}

添加then方法

首先，then 返回一個新的 Promise 對象，並且需要將回調函數加入到執行隊列中

// 添加then方法
then (onFulfilled, onRejected) {
  const { _value, _status } = this
  switch (_status) {
    // 當狀態為pending時，將then方法回調函數加入執行隊列等待執行
    case PENDING:
      this._fulfilledQueues.push(onFulfilled)
      this._rejectedQueues.push(onRejected)
      break
    // 當狀態已經改變時，立即執行對應的回調函數
    case FULFILLED:
      onFulfilled(_value)
      break
    case REJECTED:
      onRejected(_value)
      break
  }
  // 返回一個新的Promise對象
  return new MyPromise((onFulfilledNext, onRejectedNext) => {
  })
}

那返回的新的 Promise 對象什么時候改變狀態？改變為哪種狀態呢？

根據上文中 then 方法的規則，我們知道返回的新的 Promise 對象的狀態依賴於當前 then 方法回調函數執行的情況以及返回值，例如 then 的參數是否為一個函數、回調函數執行是否出錯、返回值是否為 Promise 對象。

我們來進一步完善 then 方法:

// 添加then方法
then (onFulfilled, onRejected) {
  const { _value, _status } = this
  // 返回一個新的Promise對象
  return new MyPromise((onFulfilledNext, onRejectedNext) => {
    // 封裝一個成功時執行的函數
    let fulfilled = value => {
      try {
        if (!isFunction(onFulfilled)) {
          onFulfilledNext(value)
        } else {
          let res =  onFulfilled(value);
          if (res instanceof MyPromise) {
            // 如果當前回調函數返回MyPromise對象，必須等待其狀態改變后在執行下一個回調
            res.then(onFulfilledNext, onRejectedNext)
          } else {
            //否則會將返回結果直接作為參數，傳入下一個then的回調函數，並立即執行下一個then的回調函數
            onFulfilledNext(res)
          }
        }
      } catch (err) {
        // 如果函數執行出錯，新的Promise對象的狀態為失敗
        onRejectedNext(err)
      }
    }
    // 封裝一個失敗時執行的函數
    let rejected = error => {
      try {
        if (!isFunction(onRejected)) {
          onRejectedNext(error)
        } else {
            let res = onRejected(error);
            if (res instanceof MyPromise) {
              // 如果當前回調函數返回MyPromise對象，必須等待其狀態改變后在執行下一個回調
              res.then(onFulfilledNext, onRejectedNext)
            } else {
              //否則會將返回結果直接作為參數，傳入下一個then的回調函數，並立即執行下一個then的回調函數
              onFulfilledNext(res)
            }
        }
      } catch (err) {
        // 如果函數執行出錯，新的Promise對象的狀態為失敗
        onRejectedNext(err)
      }
    }
    switch (_status) {
      // 當狀態為pending時，將then方法回調函數加入執行隊列等待執行
      case PENDING:
        this._fulfilledQueues.push(fulfilled)
        this._rejectedQueues.push(rejected)
        break
      // 當狀態已經改變時，立即執行對應的回調函數
      case FULFILLED:
        fulfilled(_value)
        break
      case REJECTED:
        rejected(_value)
        break
    }
  })
}

 

這一部分可能不太好理解，讀者需要結合上文中 then 方法的規則來細細的分析。

接着修改 _resolve 和 _reject ：依次執行隊列中的函數

當 resolve 或 reject 方法執行時，我們依次提取成功或失敗任務隊列當中的函數開始執行，並清空隊列，從而實現 then 方法的多次調用，實現的代碼如下：

// 添加resovle時執行的函數
_resolve (val) {
  if (this._status !== PENDING) return
  // 依次執行成功隊列中的函數，並清空隊列
  const run = () => {
    this._status = FULFILLED
    this._value = val
    let cb;
    while (cb = this._fulfilledQueues.shift()) {
      cb(val)
    }
  }
  // 為了支持同步的Promise，這里采用異步調用
  setTimeout(() => run(), 0)
}
// 添加reject時執行的函數
_reject (err) { 
  if (this._status !== PENDING) return
  // 依次執行失敗隊列中的函數，並清空隊列
  const run = () => {
    this._status = REJECTED
    this._value = err
    let cb;
    while (cb = this._rejectedQueues.shift()) {
      cb(err)
    }
  }
  // 為了支持同步的Promise，這里采用異步調用
  setTimeout(run, 0)
}

上面代碼中，p1 和 p2 都是 Promise 的實例，但是 p2 的resolve方法將 p1 作為參數，即一個異步操作的結果是返回另一個異步操作。

注意，這時 p1 的狀態就會傳遞給 p2，也就是說，p1 的狀態決定了 p2 的狀態。如果 p1 的狀態是Pending，那么 p2 的回調函數就會等待 p1 的狀態改變；如果 p1 的狀態已經是 Fulfilled 或者 Rejected，那么 p2 的回調函數將會立刻執行。

我們來修改_resolve來支持這樣的特性

  // 添加resovle時執行的函數
  _resolve (val) {
    const run = () => {
      if (this._status !== PENDING) return
      // 依次執行成功隊列中的函數，並清空隊列
      const runFulfilled = (value) => {
        let cb;
        while (cb = this._fulfilledQueues.shift()) {
          cb(value)
        }
      }
      // 依次執行失敗隊列中的函數，並清空隊列
      const runRejected = (error) => {
        let cb;
        while (cb = this._rejectedQueues.shift()) {
          cb(error)
        }
      }
      /* 如果resolve的參數為Promise對象，則必須等待該Promise對象狀態改變后,
        當前Promsie的狀態才會改變，且狀態取決於參數Promsie對象的狀態
      */
      if (val instanceof MyPromise) {
        val.then(value => {
          this._value = value
          this._status = FULFILLED
          runFulfilled(value)
        }, err => {
          this._value = err
          this._status = REJECTED
          runRejected(err)
        })
      } else {
        this._value = val
        this._status = FULFILLED
        runFulfilled(val)
      }
    }
    // 為了支持同步的Promise，這里采用異步調用
    setTimeout(run, 0)
  }

這樣一個Promise就基本實現了，現在我們來加一些其它的方法

2.4、catch 方法

相當於調用 then 方法, 但只傳入 Rejected 狀態的回調函數

// 添加catch方法
catch (onRejected) {
  return this.then(undefined, onRejected)
}

2.4、靜態 resolve 方法

// 添加靜態resolve方法
static resolve (value) {
  // 如果參數是MyPromise實例，直接返回這個實例
  if (value instanceof MyPromise) return value
  return new MyPromise(resolve => resolve(value))
}

2.5、靜態 reject 方法

// 添加靜態reject方法
static reject (value) {
  return new MyPromise((resolve ,reject) => reject(value))
}

2.6、靜態 all 方法

// 添加靜態all方法
static all (list) {
  return new MyPromise((resolve, reject) => {
    /**
     * 返回值的集合
     */
    let values = []
    let count = 0
    for (let [i, p] of list.entries()) {
      // 數組參數如果不是MyPromise實例，先調用MyPromise.resolve
      this.resolve(p).then(res => {
        values[i] = res
        count++
        // 所有狀態都變成fulfilled時返回的MyPromise狀態就變成fulfilled
        if (count === list.length) resolve(values)
      }, err => {
        // 有一個被rejected時返回的MyPromise狀態就變成rejected
        reject(err)
      })
    }
  })
}

2.7、靜態 race 方法

// 添加靜態race方法
static race (list) {
  return new MyPromise((resolve, reject) => {
    for (let p of list) {
      // 只要有一個實例率先改變狀態，新的MyPromise的狀態就跟着改變
      this.resolve(p).then(res => {
        resolve(res)
      }, err => {
        reject(err)
      })
    }
  })
}

2.8、finally 方法

finally 方法用於指定不管 Promise 對象最后狀態如何，都會執行的操作

finally (cb) {
  return this.then(
    value  => MyPromise.resolve(cb()).then(() => value),
    reason => MyPromise.resolve(cb()).then(() => { throw reason })
  );
};

這樣一個完整的 Promsie 就實現了，大家對 Promise 的原理也有了解，可以讓我們在使用Promise的時候更加清晰明了。

完整代碼如下

  // 判斷變量否為function
  const isFunction = variable => typeof variable === 'function'
  // 定義Promise的三種狀態常量
  const PENDING = 'PENDING'
  const FULFILLED = 'FULFILLED'
  const REJECTED = 'REJECTED'

  class MyPromise {
    constructor (handle) {
      if (!isFunction(handle)) {
        throw new Error('MyPromise must accept a function as a parameter')
      }
      // 添加狀態
      this._status = PENDING
      // 添加狀態
      this._value = undefined
      // 添加成功回調函數隊列
      this._fulfilledQueues = []
      // 添加失敗回調函數隊列
      this._rejectedQueues = []
      // 執行handle
      try {
        handle(this._resolve.bind(this), this._reject.bind(this)) 
      } catch (err) {
        this._reject(err)
      }
    }
    // 添加resovle時執行的函數
    _resolve (val) {
      const run = () => {
        if (this._status !== PENDING) return
        // 依次執行成功隊列中的函數，並清空隊列
        const runFulfilled = (value) => {
          let cb;
          while (cb = this._fulfilledQueues.shift()) {
            cb(value)
          }
        }
        // 依次執行失敗隊列中的函數，並清空隊列
        const runRejected = (error) => {
          let cb;
          while (cb = this._rejectedQueues.shift()) {
            cb(error)
          }
        }
        /* 如果resolve的參數為Promise對象，則必須等待該Promise對象狀態改變后,
          當前Promsie的狀態才會改變，且狀態取決於參數Promsie對象的狀態
        */
        if (val instanceof MyPromise) {
          val.then(value => {
            this._value = value
            this._status = FULFILLED
            runFulfilled(value)
          }, err => {
            this._value = err
            this._status = REJECTED
            runRejected(err)
          })
        } else {
          this._value = val
          this._status = FULFILLED
          runFulfilled(val)
        }
      }
      // 為了支持同步的Promise，這里采用異步調用
      setTimeout(run, 0)
    }
    // 添加reject時執行的函數
    _reject (err) { 
      if (this._status !== PENDING) return
      // 依次執行失敗隊列中的函數，並清空隊列
      const run = () => {
        this._status = REJECTED
        this._value = err
        let cb;
        while (cb = this._rejectedQueues.shift()) {
          cb(err)
        }
      }
      // 為了支持同步的Promise，這里采用異步調用
      setTimeout(run, 0)
    }
    // 添加then方法
    then (onFulfilled, onRejected) {
      const { _value, _status } = this
      // 返回一個新的Promise對象
      return new MyPromise((onFulfilledNext, onRejectedNext) => {
        // 封裝一個成功時執行的函數
        let fulfilled = value => {
          try {
            if (!isFunction(onFulfilled)) {
              onFulfilledNext(value)
            } else {
              let res =  onFulfilled(value);
              if (res instanceof MyPromise) {
                // 如果當前回調函數返回MyPromise對象，必須等待其狀態改變后在執行下一個回調
                res.then(onFulfilledNext, onRejectedNext)
              } else {
                //否則會將返回結果直接作為參數，傳入下一個then的回調函數，並立即執行下一個then的回調函數
                onFulfilledNext(res)
              }
            }
          } catch (err) {
            // 如果函數執行出錯，新的Promise對象的狀態為失敗
            onRejectedNext(err)
          }
        }
        // 封裝一個失敗時執行的函數
        let rejected = error => {
          try {
            if (!isFunction(onRejected)) {
              onRejectedNext(error)
            } else {
                let res = onRejected(error);
                if (res instanceof MyPromise) {
                  // 如果當前回調函數返回MyPromise對象，必須等待其狀態改變后在執行下一個回調
                  res.then(onFulfilledNext, onRejectedNext)
                } else {
                  //否則會將返回結果直接作為參數，傳入下一個then的回調函數，並立即執行下一個then的回調函數
                  onFulfilledNext(res)
                }
            }
          } catch (err) {
            // 如果函數執行出錯，新的Promise對象的狀態為失敗
            onRejectedNext(err)
          }
        }
        switch (_status) {
          // 當狀態為pending時，將then方法回調函數加入執行隊列等待執行
          case PENDING:
            this._fulfilledQueues.push(fulfilled)
            this._rejectedQueues.push(rejected)
            break
          // 當狀態已經改變時，立即執行對應的回調函數
          case FULFILLED:
            fulfilled(_value)
            break
          case REJECTED:
            rejected(_value)
            break
        }
      })
    }
    // 添加catch方法
    catch (onRejected) {
      return this.then(undefined, onRejected)
    }
    // 添加靜態resolve方法
    static resolve (value) {
      // 如果參數是MyPromise實例，直接返回這個實例
      if (value instanceof MyPromise) return value
      return new MyPromise(resolve => resolve(value))
    }
    // 添加靜態reject方法
    static reject (value) {
      return new MyPromise((resolve ,reject) => reject(value))
    }
    // 添加靜態all方法
    static all (list) {
      return new MyPromise((resolve, reject) => {
        /**
         * 返回值的集合
         */
        let values = []
        let count = 0
        for (let [i, p] of list.entries()) {
          // 數組參數如果不是MyPromise實例，先調用MyPromise.resolve
          this.resolve(p).then(res => {
            values[i] = res
            count++
            // 所有狀態都變成fulfilled時返回的MyPromise狀態就變成fulfilled
            if (count === list.length) resolve(values)
          }, err => {
            // 有一個被rejected時返回的MyPromise狀態就變成rejected
            reject(err)
          })
        }
      })
    }
    // 添加靜態race方法
    static race (list) {
      return new MyPromise((resolve, reject) => {
        for (let p of list) {
          // 只要有一個實例率先改變狀態，新的MyPromise的狀態就跟着改變
          this.resolve(p).then(res => {
            resolve(res)
          }, err => {
            reject(err)
          })
        }
      })
    }
    finally (cb) {
      return this.then(
        value  => MyPromise.resolve(cb()).then(() => value),
        reason => MyPromise.resolve(cb()).then(() => { throw reason })
      );
    }
  }

 

 

參考鏈接：

https://es6.ruanyifeng.com/#docs/promise

https://juejin.im/post/5b83cb5ae51d4538cc3ec354#heading-1