Promise實(shí)現(xiàn)原理（附源碼）

QLQ 發(fā)布于2019-08-21 18:34 / 554人閱讀

摘要：如果的狀態(tài)是，那么的回調(diào)函數(shù)就會(huì)等待的狀態(tài)改變?nèi)绻臓顟B(tài)已經(jīng)是或者，那么的回調(diào)函數(shù)將會(huì)立刻執(zhí)行。

本篇文章主要在于探究 Promise 的實(shí)現(xiàn)原理，帶領(lǐng)大家一步一步實(shí)現(xiàn)一個(gè) Promise , 不對(duì)其用法做說明，如果讀者還對(duì)Promise的用法不了解，可以查看阮一峰老師的ES6 Promise教程。

接下來，帶你一步一步實(shí)現(xiàn)一個(gè) Promise

1. Promise 基本結(jié)構(gòu)

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

構(gòu)造函數(shù)Promise必須接受一個(gè)函數(shù)作為參數(shù)，我們稱該函數(shù)為handle，handle又包含resolve和reject兩個(gè)參數(shù)，它們是兩個(gè)函數(shù)。

定義一個(gè)判斷一個(gè)變量是否為函數(shù)的方法，后面會(huì)用到

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

首先，我們定義一個(gè)名為 MyPromise 的 Class，它接受一個(gè)函數(shù) handle 作為參數(shù)

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

再往下看

2. Promise 狀態(tài)和值

Promise 對(duì)象存在以下三種狀態(tài)：

Pending(進(jìn)行中)

Fulfilled(已成功)

Rejected(已失敗)

狀態(tài)只能由 Pending 變?yōu)?Fulfilled 或由 Pending 變?yōu)?Rejected ，且狀態(tài)改變之后不會(huì)在發(fā)生變化，會(huì)一直保持這個(gè)狀態(tài)。

Promise的值是指狀態(tài)改變時(shí)傳遞給回調(diào)函數(shù)的值

上文中handle函數(shù)包含 resolve 和 reject 兩個(gè)參數(shù)，它們是兩個(gè)函數(shù)，可以用于改變 Promise 的狀態(tài)和傳入 Promise 的值

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

這里 resolve 傳入的 "FULFILLED" 就是 Promise 的值

resolve 和 reject

resolve : 將Promise對(duì)象的狀態(tài)從 Pending(進(jìn)行中) 變?yōu)?Fulfilled(已成功)

reject : 將Promise對(duì)象的狀態(tài)從 Pending(進(jìn)行中) 變?yōu)?Rejected(已失敗)

resolve 和 reject 都可以傳入任意類型的值作為實(shí)參，表示 Promise 對(duì)象成功（Fulfilled）和失敗（Rejected）的值

了解了 Promise 的狀態(tài)和值，接下來，我們?yōu)?MyPromise 添加狀態(tài)屬性和值

首先定義三個(gè)常量，用于標(biāo)記Promise對(duì)象的三種狀態(tài)

// 定義Promise的三種狀態(tài)常量
const PENDING = "PENDING"
const FULFILLED = "FULFILLED"
const REJECTED = "REJECTED"

再為 MyPromise 添加狀態(tài)和值，并添加狀態(tài)改變的執(zhí)行邏輯

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

這樣就實(shí)現(xiàn)了 Promise 狀態(tài)和值的改變。下面說一說 Promise 的核心: then 方法

3. Promise 的 then 方法

Promise 對(duì)象的 then 方法接受兩個(gè)參數(shù)：

promise.then(onFulfilled, onRejected)

參數(shù)可選

onFulfilled 和 onRejected 都是可選參數(shù)。

如果 onFulfilled 或 onRejected 不是函數(shù)，其必須被忽略

onFulfilled 特性

? ? 如果 onFulfilled 是函數(shù)：

當(dāng) promise 狀態(tài)變?yōu)槌晒r(shí)必須被調(diào)用，其第一個(gè)參數(shù)為 promise 成功狀態(tài)傳入的值（ resolve 執(zhí)行時(shí)傳入的值）

在 promise 狀態(tài)改變前其不可被調(diào)用

其調(diào)用次數(shù)不可超過一次

onRejected 特性

? ? 如果 onRejected 是函數(shù)：

當(dāng) promise 狀態(tài)變?yōu)槭r(shí)必須被調(diào)用，其第一個(gè)參數(shù)為 promise 失敗狀態(tài)傳入的值（ reject 執(zhí)行時(shí)傳入的值）

在 promise 狀態(tài)改變前其不可被調(diào)用

其調(diào)用次數(shù)不可超過一次

多次調(diào)用

? ? then 方法可以被同一個(gè) promise 對(duì)象調(diào)用多次

當(dāng) promise 成功狀態(tài)時(shí)，所有 onFulfilled 需按照其注冊(cè)順序依次回調(diào)

當(dāng) promise 失敗狀態(tài)時(shí)，所有 onRejected 需按照其注冊(cè)順序依次回調(diào)

then 方法必須返回一個(gè)新的 promise 對(duì)象

promise2 = promise1.then(onFulfilled, onRejected);

因此 promise 支持鏈?zhǔn)秸{(diào)用

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

這里涉及到 Promise 的執(zhí)行規(guī)則，包括“值的傳遞”和“錯(cuò)誤捕獲”機(jī)制：

1、如果 onFulfilled 或者 onRejected 返回一個(gè)值 x ，則運(yùn)行下面的 Promise 解決過程：[[Resolve]](promise2, x)

若 x 不為 Promise ，則使 x 直接作為新返回的 Promise 對(duì)象的值，即新的onFulfilled 或者 onRejected 函數(shù)的參數(shù).

若 x 為 Promise ，這時(shí)后一個(gè)回調(diào)函數(shù)，就會(huì)等待該 Promise 對(duì)象(即 x )的狀態(tài)發(fā)生變化，才會(huì)被調(diào)用，并且新的 Promise 狀態(tài)和 x 的狀態(tài)相同。

下面的例子用于幫助理解：

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

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

2、如果 onFulfilled 或者 onRejected 拋出一個(gè)異常 e ，則 promise2 必須變?yōu)槭?b>（Rejected），并返回失敗的值 e，例如：

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

3、如果 onFulfilled 不是函數(shù)且 promise1 狀態(tài)為成功（Fulfilled）， promise2 必須變?yōu)槌晒?b>（Fulfilled）并返回 promise1 成功的值，例如：

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

4、如果 onRejected 不是函數(shù)且 promise1 狀態(tài)為失敗（Rejected），promise2 必須變?yōu)槭?b>（Rejected）并返回 promise1 失敗的值，例如：

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

根據(jù)上面的規(guī)則，我們來為完善 MyPromise

修改 constructor : 增加執(zhí)行隊(duì)列

由于 then 方法支持多次調(diào)用，我們可以維護(hù)兩個(gè)數(shù)組，將每次 then 方法注冊(cè)時(shí)的回調(diào)函數(shù)添加到數(shù)組中，等待執(zhí)行

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

添加then方法

首先，then 返回一個(gè)新的 Promise 對(duì)象，并且需要將回調(diào)函數(shù)加入到執(zhí)行隊(duì)列中

// 添加then方法
then (onFulfilled, onRejected) {
  const { _value, _status } = this
  switch (_status) {
    // 當(dāng)狀態(tài)為pending時(shí)，將then方法回調(diào)函數(shù)加入執(zhí)行隊(duì)列等待執(zhí)行
    case PENDING:
      this._fulfilledQueues.push(onFulfilled)
      this._rejectedQueues.push(onRejected)
      break
    // 當(dāng)狀態(tài)已經(jīng)改變時(shí)，立即執(zhí)行對(duì)應(yīng)的回調(diào)函數(shù)
    case FULFILLED:
      onFulfilled(_value)
      break
    case REJECTED:
      onRejected(_value)
      break
  }
  // 返回一個(gè)新的Promise對(duì)象
  return new MyPromise((onFulfilledNext, onRejectedNext) => {
  })
}

那返回的新的 Promise 對(duì)象什么時(shí)候改變狀態(tài)？改變?yōu)槟姆N狀態(tài)呢？

根據(jù)上文中 then 方法的規(guī)則，我們知道返回的新的 Promise 對(duì)象的狀態(tài)依賴于當(dāng)前 then 方法回調(diào)函數(shù)執(zhí)行的情況以及返回值，例如 then 的參數(shù)是否為一個(gè)函數(shù)、回調(diào)函數(shù)執(zhí)行是否出錯(cuò)、返回值是否為 Promise 對(duì)象。

我們來進(jìn)一步完善 then 方法:

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

這一部分可能不太好理解，讀者需要結(jié)合上文中 then 方法的規(guī)則來細(xì)細(xì)的分析。

接著修改 _resolve 和 _reject ：依次執(zhí)行隊(duì)列中的函數(shù)

當(dāng) resolve 或 reject 方法執(zhí)行時(shí)，我們依次提取成功或失敗任務(wù)隊(duì)列當(dāng)中的函數(shù)開始執(zhí)行，并清空隊(duì)列，從而實(shí)現(xiàn) then 方法的多次調(diào)用，實(shí)現(xiàn)的代碼如下：

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

這里還有一種特殊的情況，就是當(dāng) resolve 方法傳入的參數(shù)為一個(gè) Promise 對(duì)象時(shí)，則該 Promise 對(duì)象狀態(tài)決定當(dāng)前 Promise 對(duì)象的狀態(tài)。

const p1 = new Promise(function (resolve, reject) {
  // ...
});

const p2 = new Promise(function (resolve, reject) {
  // ...
  resolve(p1);
})

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

注意，這時(shí) p1 的狀態(tài)就會(huì)傳遞給 p2，也就是說，p1 的狀態(tài)決定了 p2 的狀態(tài)。如果 p1 的狀態(tài)是Pending，那么 p2 的回調(diào)函數(shù)就會(huì)等待 p1 的狀態(tài)改變；如果 p1 的狀態(tài)已經(jīng)是 Fulfilled 或者 Rejected，那么 p2 的回調(diào)函數(shù)將會(huì)立刻執(zhí)行。

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

  // 添加resovle時(shí)執(zhí)行的函數(shù)
  _resolve (val) {
    const run = () => {
      if (this._status !== PENDING) return
      // 依次執(zhí)行成功隊(duì)列中的函數(shù)，并清空隊(duì)列
      const runFulfilled = (value) => {
        let cb;
        while (cb = this._fulfilledQueues.shift()) {
          cb(value)
        }
      }
      // 依次執(zhí)行失敗隊(duì)列中的函數(shù)，并清空隊(duì)列
      const runRejected = (error) => {
        let cb;
        while (cb = this._rejectedQueues.shift()) {
          cb(error)
        }
      }
      /* 如果resolve的參數(shù)為Promise對(duì)象，則必須等待該P(yáng)romise對(duì)象狀態(tài)改變后,
        當(dāng)前Promsie的狀態(tài)才會(huì)改變，且狀態(tài)取決于參數(shù)Promsie對(duì)象的狀態(tài)
      */
      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，這里采用異步調(diào)用
    setTimeout(run, 0)
  }

這樣一個(gè)Promise就基本實(shí)現(xiàn)了，現(xiàn)在我們來加一些其它的方法

catch 方法

相當(dāng)于調(diào)用 then 方法, 但只傳入 Rejected 狀態(tài)的回調(diào)函數(shù)

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

靜態(tài) resolve 方法

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

靜態(tài) reject 方法

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

靜態(tài) all 方法

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

靜態(tài) race 方法

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

finally 方法

finally 方法用于指定不管 Promise 對(duì)象最后狀態(tài)如何，都會(huì)執(zhí)行的操作

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

這樣一個(gè)完整的 Promsie 就實(shí)現(xiàn)了，大家對(duì) Promise 的原理也有了解，可以讓我們?cè)谑褂肞romise的時(shí)候更加清晰明了。

完整代碼如下

  // 判斷變量否為function
  const isFunction = variable => typeof variable === "function"
  // 定義Promise的三種狀態(tài)常量
  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")
      }
      // 添加狀態(tài)
      this._status = PENDING
      // 添加狀態(tài)
      this._value = undefined
      // 添加成功回調(diào)函數(shù)隊(duì)列
      this._fulfilledQueues = []
      // 添加失敗回調(diào)函數(shù)隊(duì)列
      this._rejectedQueues = []
      // 執(zhí)行handle
      try {
        handle(this._resolve.bind(this), this._reject.bind(this)) 
      } catch (err) {
        this._reject(err)
      }
    }
    // 添加resovle時(shí)執(zhí)行的函數(shù)
    _resolve (val) {
      const run = () => {
        if (this._status !== PENDING) return
        // 依次執(zhí)行成功隊(duì)列中的函數(shù)，并清空隊(duì)列
        const runFulfilled = (value) => {
          let cb;
          while (cb = this._fulfilledQueues.shift()) {
            cb(value)
          }
        }
        // 依次執(zhí)行失敗隊(duì)列中的函數(shù)，并清空隊(duì)列
        const runRejected = (error) => {
          let cb;
          while (cb = this._rejectedQueues.shift()) {
            cb(error)
          }
        }
        /* 如果resolve的參數(shù)為Promise對(duì)象，則必須等待該P(yáng)romise對(duì)象狀態(tài)改變后,
          當(dāng)前Promsie的狀態(tài)才會(huì)改變，且狀態(tài)取決于參數(shù)Promsie對(duì)象的狀態(tài)
        */
        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，這里采用異步調(diào)用
      setTimeout(run, 0)
    }
    // 添加reject時(shí)執(zhí)行的函數(shù)
    _reject (err) { 
      if (this._status !== PENDING) return
      // 依次執(zhí)行失敗隊(duì)列中的函數(shù)，并清空隊(duì)列
      const run = () => {
        this._status = REJECTED
        this._value = err
        let cb;
        while (cb = this._rejectedQueues.shift()) {
          cb(err)
        }
      }
      // 為了支持同步的Promise，這里采用異步調(diào)用
      setTimeout(run, 0)
    }
    // 添加then方法
    then (onFulfilled, onRejected) {
      const { _value, _status } = this
      // 返回一個(gè)新的Promise對(duì)象
      return new MyPromise((onFulfilledNext, onRejectedNext) => {
        // 封裝一個(gè)成功時(shí)執(zhí)行的函數(shù)
        let fulfilled = value => {
          try {
            if (!isFunction(onFulfilled)) {
              onFulfilledNext(value)
            } else {
              let res =  onFulfilled(value);
              if (res instanceof MyPromise) {
                // 如果當(dāng)前回調(diào)函數(shù)返回MyPromise對(duì)象，必須等待其狀態(tài)改變后在執(zhí)行下一個(gè)回調(diào)
                res.then(onFulfilledNext, onRejectedNext)
              } else {
                //否則會(huì)將返回結(jié)果直接作為參數(shù)，傳入下一個(gè)then的回調(diào)函數(shù)，并立即執(zhí)行下一個(gè)then的回調(diào)函數(shù)
                onFulfilledNext(res)
              }
            }
          } catch (err) {
            // 如果函數(shù)執(zhí)行出錯(cuò)，新的Promise對(duì)象的狀態(tài)為失敗
            onRejectedNext(err)
          }
        }
        // 封裝一個(gè)失敗時(shí)執(zhí)行的函數(shù)
        let rejected = error => {
          try {
            if (!isFunction(onRejected)) {
              onRejectedNext(error)
            } else {
                let res = onRejected(error);
                if (res instanceof MyPromise) {
                  // 如果當(dāng)前回調(diào)函數(shù)返回MyPromise對(duì)象，必須等待其狀態(tài)改變后在執(zhí)行下一個(gè)回調(diào)
                  res.then(onFulfilledNext, onRejectedNext)
                } else {
                  //否則會(huì)將返回結(jié)果直接作為參數(shù)，傳入下一個(gè)then的回調(diào)函數(shù)，并立即執(zhí)行下一個(gè)then的回調(diào)函數(shù)
                  onFulfilledNext(res)
                }
            }
          } catch (err) {
            // 如果函數(shù)執(zhí)行出錯(cuò)，新的Promise對(duì)象的狀態(tài)為失敗
            onRejectedNext(err)
          }
        }
        switch (_status) {
          // 當(dāng)狀態(tài)為pending時(shí)，將then方法回調(diào)函數(shù)加入執(zhí)行隊(duì)列等待執(zhí)行
          case PENDING:
            this._fulfilledQueues.push(fulfilled)
            this._rejectedQueues.push(rejected)
            break
          // 當(dāng)狀態(tài)已經(jīng)改變時(shí)，立即執(zhí)行對(duì)應(yīng)的回調(diào)函數(shù)
          case FULFILLED:
            fulfilled(_value)
            break
          case REJECTED:
            rejected(_value)
            break
        }
      })
    }
    // 添加catch方法
    catch (onRejected) {
      return this.then(undefined, onRejected)
    }
    // 添加靜態(tài)resolve方法
    static resolve (value) {
      // 如果參數(shù)是MyPromise實(shí)例，直接返回這個(gè)實(shí)例
      if (value instanceof MyPromise) return value
      return new MyPromise(resolve => resolve(value))
    }
    // 添加靜態(tài)reject方法
    static reject (value) {
      return new MyPromise((resolve ,reject) => reject(value))
    }
    // 添加靜態(tài)all方法
    static all (list) {
      return new MyPromise((resolve, reject) => {
        /**
         * 返回值的集合
         */
        let values = []
        let count = 0
        for (let [i, p] of list.entries()) {
          // 數(shù)組參數(shù)如果不是MyPromise實(shí)例，先調(diào)用MyPromise.resolve
          this.resolve(p).then(res => {
            values[i] = res
            count++
            // 所有狀態(tài)都變成fulfilled時(shí)返回的MyPromise狀態(tài)就變成fulfilled
            if (count === list.length) resolve(values)
          }, err => {
            // 有一個(gè)被rejected時(shí)返回的MyPromise狀態(tài)就變成rejected
            reject(err)
          })
        }
      })
    }
    // 添加靜態(tài)race方法
    static race (list) {
      return new MyPromise((resolve, reject) => {
        for (let p of list) {
          // 只要有一個(gè)實(shí)例率先改變狀態(tài)，新的MyPromise的狀態(tài)就跟著改變
          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 })
      );
    }
  }

如果覺得還行的話，點(diǎn)個(gè)贊、收藏一下再走吧。

云服務(wù)器 GPU云服務(wù)器二次淺封裝實(shí)踐【附源碼】 jquery_promise實(shí)現(xiàn) 這篇文章手把手帶你閱讀Netty源碼【附隊(duì)列實(shí)現(xiàn)原理

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

QLQ

男|高級(jí)講師

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

TA的文章

【11.15-11.21】博客精彩回顧

閱讀 1088·2021-11-24 09:39
騰訊云香港云服務(wù)器怎么購買便宜?喲!來騰訊云海外全球購逛一逛唄

閱讀 1320·2021-11-18 13:18
【手把手帶你刷LeetCode】——15.劍指offer之不用加減乘除做加法（位運(yùn)算）

閱讀 2462·2021-11-15 11:38
淺談物聯(lián)網(wǎng)技術(shù)

閱讀 1840·2021-09-26 09:47
主機(jī)域名是什么-主機(jī)域名是哪個(gè)？

閱讀 1641·2021-09-22 15:09
回調(diào)函數(shù)；

閱讀 1634·2021-09-03 10:29
原生JS操作DOM元素的類名class

閱讀 1522·2019-08-29 17:28
http相關(guān)知識(shí)點(diǎn)回顧

閱讀 2961·2019-08-29 16:30

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

資訊專欄INFORMATION COLUMN

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

Promise實(shí)現(xiàn)原理（附源碼）

相關(guān)文章

javascript知識(shí)點(diǎn)

Node.js爬取科技新聞網(wǎng)站cnBeta（附前端及服務(wù)端源碼）

Node.js爬取科技新聞網(wǎng)站cnBeta（附前端及服務(wù)端源碼）

es6 promise源碼實(shí)現(xiàn)

"雙非"應(yīng)屆生校招如何獲得大廠青睞?（內(nèi)附前端大廠面經(jīng)+技術(shù)崗超全求職攻略）

發(fā)表評(píng)論

0條評(píng)論

QLQ

男|高級(jí)講師

TA的文章

【11.15-11.21】博客精彩回顧

騰訊云香港云服務(wù)器怎么購買便宜?喲!來騰訊云海外全球購逛一逛唄

【手把手帶你刷LeetCode】——15.劍指offer之不用加減乘除做加法（位運(yùn)算）

淺談物聯(lián)網(wǎng)技術(shù)

主機(jī)域名是什么-主機(jī)域名是哪個(gè)？

回調(diào)函數(shù)；

原生JS操作DOM元素的類名class

http相關(guān)知識(shí)點(diǎn)回顧

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

Promise實(shí)現(xiàn)原理（附源碼）

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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