关于面试:转载Promise实现原理附源码

31次阅读

共计 12441 个字符，预计需要花费 32 分钟才能阅读完成。

本篇文章次要在于探索 Promise 的实现原理，率领大家一步一步实现一个 Promise , 不对其用法做阐明，如果读者还对 Promise 的用法不理解，能够查看阮一峰老师的 ES6 Promise 教程。

接下来，带你一步一步实现一个 Promise

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')
    }
  }
}

再往下看

Promise 状态和值

Promise 对象存在以下三种状态：

  • Pending(进行中)
  • Fulfilled(已胜利)
  • Rejected(已失败)

状态只能由 Pending 变为 Fulfilled 或由 Pending 变为 Rejected，且状态扭转之后不会在发生变化，会始终放弃这个状态。

Promise的值是指状态扭转时传递给回调函数的值

上文中 handle 函数蕴含 resolve 和 reject 两个参数，它们是两个函数，能够用于扭转 Promise 的状态和传入 Promise 的值

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

这里 resolve 传入的 "FULFILLED" 就是 Promise 的值

resolve 和 reject

  • resolve : 将 Promise 对象的状态从 Pending(进行中) 变为 Fulfilled(已胜利)
  • reject : 将 Promise 对象的状态从 Pending(进行中) 变为 Rejected(已失败)
  • resolve 和 reject 都能够传入任意类型的值作为实参，示意 Promise 对象胜利 （Fulfilled） 和失败 （Rejected） 的值

理解了 Promise 的状态和值，接下来，咱们为 MyPromise 增加状态属性和值

首先定义三个常量，用于标记 Promise 对象的三种状态

// 定义 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
  }
}

这样就实现了 Promise 状态和值的扭转。上面说一说 Promise 的外围: then 办法

Promise 的 then 办法

Promise 对象的 then 办法承受两个参数：

promise.then(onFulfilled, onRejected)

参数可选

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 的执行规定，包含“值的传递”和“谬误捕捉”机制：

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

这里还有一种非凡的状况，就是当 resolve 办法传入的参数为一个 Promise 对象时，则该 Promise 对象状态决定以后 Promise 对象的状态。

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

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

下面代码中，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 就根本实现了，当初咱们来加一些其它的办法

catch 办法

相当于调用 then 办法, 但只传入 Rejected 状态的回调函数

// 增加 catch 办法
catch (onRejected) {return this.then(undefined, onRejected)
}

动态 resolve 办法

// 增加动态 resolve 办法
static resolve (value) {
  // 如果参数是 MyPromise 实例，间接返回这个实例
  if (value instanceof MyPromise) return value
  return new MyPromise(resolve => resolve(value))
}

动态 reject 办法

// 增加动态 reject 办法
static reject (value) {return new MyPromise((resolve ,reject) => reject(value))
}

动态 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)
      })
    }
  })
}

动态 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)
      })
    }
  })
}

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

正文完
面试
发表至： 面试
2021-03-16
 0
说一下-Dubbo-的工作原理
关于面试:17张思维导图2021年作为一名前端开发者需要掌握这些前端面试复习资料参考大纲
关于面试:前端常见面试题总结JavaScript部分二
关于面试:9个典型的开发者关系面试题