手写一个Promise | Louis K’s Blog

type

Post

status

Published

date

Jul 1, 2022

slug

code-promise

summary

手写Promise是前端面试经常考察的点。实际上只要熟悉Promise A+规范，并不很难，一般面试也不要求写得很全。

基础版本

可以先来回顾一下 Promise 最基本的使用方式：


const p1 = new Promise((resolve, reject) => {
  console.log('create a promise')
  resolve('success')
})

const p2 = p1.then(data => {
  console.log(data)
  throw new Error('rejected')
})

const p3 = p2.then(
  data => {
    console.log('success', data)
  },
  err => {
    console.log('failed', err)
  }
)

首先，我们在调用Promise构造函数后，会返回一个Promise对象；构造函数需要传入一个函数参数，称为执行函数，Promise 的主要工作代码都在执行函数中；如果执行函数中的工作成功了，那么就会调用resolve()函数，如果失败了，会调用reject函数；Promise 的状态是不可由外部代码改变的，并且一旦落定就不可逆。

结合Promise/A+规范，我们可以分析出 Promise 的基本特征：

Promise 实例有三个状态：pending、fulfilled和rejected；

调用Promise构造函数来创建一个 Promise，并且需要传入一个执行函数，它会立刻运行；

执行函数接受两个参数，分别是resolve和reject；

Promise 的默认状态是pending；

Promise 有一个value用来保存成功状态的值，可以是undefined、thenable或者 Promise；

Promise 有一个reason用来保存失败状态的值；

Promise 只能从pending到rejected，或者从pending到fulfilled，状态一旦确认，就不会再改变了；

Promise 必须有一个then方法，它接受两个参数，分别是 Promise 成功的回调onFulfilled，还有 Promise 失败的回调onRejected；

如果调用then时，Promise 已经成功，那么执行onFulfilled，参数是 Promise 的value；

如果调用then时，Promise 已经失败，那么执行onRejected，参数是 Promise 的reason；

如果then中抛出了异常，那么就会把这个异常作为参数，传递给下一个then的失败的回调onRejected。

按照以上特征，我们可以尝试实现一个粗略的 Promise：


const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {
  constructor(executor) {
    // 默认状态 pending
    this.status = PENDING

    // 存放成功状态的值
    this.value = undefined

    // 存放失败状态的值
    this.reason = undefined

    // 成功后调用的方法
    const resolve = value => {
      // 状态为PENDING时才可以更新状态，防止executor中调用了两次resolve/reject方法
      if (this.status === PENDING) {
        this.status = FULFILLED
        this.value = value
      }
    }

    // 失败后调用的方法
    const reject = reason => {
      if (this.status === PENDING) {
        this.status = REJECTED
        this.reason = reason
      }
    }

    try {
      // 立即执行，将resolve和reject函数传递给执行函数
      executor(resolve, reject)
    } catch (error) {
      reject(error)
    }
  }

  then(onFulfilled, onRejected) {
    if (this.status === FULFILLED) {
      onFulfilled(this.value)
    }

    if (this.status === REJECTED) {
      onRejected(this.reason)
    }
  }
}

function test() {
  const promise = new MyPromise((resolve, _) => {
    resolve('成功')
  }).then(
    data => {
      console.log('success', data)
    },
    error => {
      console.log('failed', error)
    }
  )
}

// success 成功
test()

现在我们已经实现了一个最简易的基础版本的 Promise，它有很多不足，最大的一个问题就是不能处理异步操作。如果我们在执行函数中进行异步操作，那么通过 Promise.prototype.then 添加的处理函数没有作用。


function test() {
  const promise = new MyPromise((resolve, _) => {
    setTimeout(() => {
      resolve('成功')
    }, 1000)
  }).then(
    data => {
      console.log('success', data)
    },
    error => {
      console.log('failed', error)
    }
  )
}

test()
// 没有作用

因为 Promise 实例调用then()方法时，当前的 Promise 并没有成功，一直处于pending状态。所以在调用then()方法设置成功和失败的回调时，我们需要将其先保存起来，再在 Promise 落定时调用设置好的回调。

结合这个思路我们优化一下代码：


const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {
  constructor(executor) {
    // 默认状态 pending
    this.status = PENDING

    // 存放成功状态的值
    this.value = undefined

    // 存放失败状态的值
    this.reason = undefined

    // 存放成功的回调
    this.onResolvedCallbacks = []

    // 存放失败的回调
    this.onRejectedCallbacks = []

    // 成功后调用的方法
    const resolve = value => {
      // 状态为PENDING时才可以更新状态，防止executor中调用了两次resolve/reject方法
      if (this.status === PENDING) {
        this.status = FULFILLED
        this.value = value
        this.onResolvedCallbacks.forEach(fn => fn())
      }
    }

    // 失败后调用的方法
    const reject = reason => {
      if (this.status === PENDING) {
        this.status = REJECTED
        this.reason = reason
        this.onRejectedCallbacks.forEach(fn => fn())
      }
    }

    try {
      // 立即执行，将resolve和reject函数传递给执行函数
      executor(resolve, reject)
    } catch (error) {
      reject(error)
    }
  }

  then(onFulfilled, onRejected) {
    if (this.status === FULFILLED) {
      onFulfilled(this.value)
    }

    if (this.status === REJECTED) {
      onRejected(this.reason)
    }

    if (this.status === PENDING) {
      this.onResolvedCallbacks.push(() => {
        onFulfilled(this.value)
      })

      this.onRejectedCallbacks.push(() => {
        onRejected(this.reason)
      })
    }
  }
}

现在，异步问题已经解决了！

`then`的链式调用和值穿透

我们都知道 Promise 有一个很方便的特性是可以链式调用。在我们使用 Promise 的时候，当then函数中return了一个值，不管是什么值，我们都能在下一个then中获取到，这就是 then的链式调用。而且，当我们不在then中传入参数，例如：promise.then().then()时，那么后面的then依旧能够得到前面的then()的返回值，这就是所谓值的穿透。那么具体应该怎么实现呢？简单思考一下，如果每次调用then()的时候，我们都创建一个新的 Promise 对象，并且将上一个then的返回结果传给这个新的 Promise 的then方法，不就可以一直then下去了么？

有了上面的想法，再结合 Promise/A+规范梳理一下要点：

then的参数onFulfilled和onRejected可以缺省，如果onFulfilled或者onRejected不是函数，将其忽略，且依旧可以在下面的then中获取到之前返回的值；

Promise 可以then多次，每次执行完then()方法之后返回的都是一个新的 Promise；

如果then的返回值x是一个普通的值，那么就会把这个结果作为参数，传递给下一个then的成功的回调；

如果then中抛出了异常，那么就会把这个异常作为参数，传递给下一个then的失败的回调；

如果then的返回值x是一个 Promise，那么就等待这个 Promise 执行完。Promise 如果成功，就走下一个then的成功回调；如果失败或者抛出异常就走下一个then的失败回调；

如果then的返回值x和 Promise 是同一个引用对象，造成循环引用则抛出异常，将异常传递给下一个then的失败回调；

如果then的返回值x是一个 Promise，且x同时调用resolve和reject函数，则第一次调用优先，其他所有调用被忽略。

按照这些要求，我们将代码补充完整：


const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

const resolvePromise = (promise, x, resolve, reject) => {
  if (promise === x) {
    return reject(
      new TypeError('Chaining cycle detected for promise #<Promise>')
    )
  }

  let called

  if ((typeof x === 'object' && x !== null) || typeof x === 'function') {
    try {
      let then = x.then
      if (typeof then === 'function') {
        then.call(
          x,
          y => {
            if (called) return
            called = true
            resolvePromise(promise, y, resolve, reject)
          },
          r => {
            if (called) return
            called = true
            reject(r)
          }
        )
      } else {
        resolve(x)
      }
    } catch (err) {
      if (called) {
        return
      }
      called = true
      reject(err)
    }
  } else {
    resolve(x)
  }
}

class MyPromise {
  constructor(executor) {
    // 默认状态 pending
    this.status = PENDING

    // 存放成功状态的值
    this.value = undefined

    // 存放失败状态的值
    this.reason = undefined

    // 存放成功的回调
    this.onResolvedCallbacks = []

    // 存放失败的回调
    this.onRejectedCallbacks = []

    // 成功后调用的方法
    const resolve = value => {
      // 状态为PENDING时才可以更新状态，防止executor中调用了两次resolve/reject方法
      if (value instanceof Promise) {
        return value.then(resolve, reject)
      }

      if (this.status === PENDING) {
        this.status = FULFILLED
        this.value = value
        this.onResolvedCallbacks.forEach(fn => fn())
      }
    }

    // 失败后调用的方法
    const reject = reason => {
      if (this.status === PENDING) {
        this.status = REJECTED
        this.reason = reason
        this.onRejectedCallbacks.forEach(fn => fn())
      }
    }

    try {
      // 立即执行，将resolve和reject函数传递给执行函数
      executor(resolve, reject)
    } catch (error) {
      reject(error)
    }
  }

  then(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v
    onRejected = typeof onRejected === 'function' ? onRejected : v => v

    const _promise = new Promise((resolve, reject) => {
      if (this.status === FULFILLED) {
        setTimeout(() => {
          try {
            const x = onFulfilled(this.value)
            resolvePromise(_promise, x, resolve, reject)
          } catch (e) {
            reject(e)
          }
        }, 0)
      }

      if (this.status === REJECTED) {
        setTimeout(() => {
          try {
            const x = onRejected(this.reason)
            resolvePromise(_promise, x, resolve, reject)
          } catch (e) {
            reject(e)
          }
        }, 0)
      }

      if (this.status === PENDING) {
        this.onResolvedCallbacks.push(() => {
          setTimeout(() => {
            try {
              const x = onFulfilled(this.value)
              resolvePromise(_promise, x, resolve, reject)
            } catch (e) {
              reject(e)
            }
          }, 0)
        })

        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              const x = onRejected(this.reason)
              resolvePromise(_promise, x, resolve, reject)
            } catch (e) {
              reject(e)
            }
          }, 0)
        })
      }
    })

    return _promise
  }
}

function test() {
  const promise = new Promise((resolve, reject) => {
    reject('失败')
  })
    .then()
    .then()
    .then(
      data => {
        console.log(data)
      },
      err => {
        console.log('err', err)
      }
    )
}

test()

// 失败 err

至此我们已经完成了 Promise 最关键的部分：then的链式调用和值穿透。

实现 Promise 的其他 API

我们已经按照符合 Promise/A+规范的方式实现了一个Promise类，但原生的 Promise 还提供了一些其他方法，例如：

Promise.resolve()

Promise.reject()

Promise.prototype.catch()

Promise.prototype.finally()

Promise.all()

Promise.race()

下面我们逐一实现这些方法。

`Promise.resolve()`

它默认产生一个成功的Promise，如果传入的参数不是一个值而是一个 Promise，那么会等待这个 Promise 落定。


static resolve(data) {
  return new Promise((resolve, reject) => {
    resolve(data)
  })
}

`Promise.reject()`

它默认产生一个失败的 Promise，Promise.reject是直接将值变为错误结果。


static reject(reason) {
  return new Promise((resolve, reject) => {
    reject(reason)
  })
}

`Promise.prototype.catch()`

Promise.prototype.catch用来捕获 Promise 的异常，实际上是then的一种简写。


Promise.prototype.catch = function (errCallback) {
  return this.then(null, errCallback)
}

`Promise.prototype.finally`

finally 并不表示最终的意思，而表示无论如何都会执行的意思。


Promise.prototype.finally = function (callback) {
  return this.then(
    value => {
      return Promise.resolve(callback()).then(() => value)
    },
    reason => {
      return Promise.resolve(callback()).then(() => {
        throw reason
      })
    }
  )
}

`Promise.all`

Promise.all用来解决并发多个 Promise 的问题，获取最终的结果（如果有一个失败则失败）。


static all(promises) {
  return new Promise((resolve, reject) => {
    const resultArr = []
    let orderIdx = 0
    const processResultByKey = (value, index) => {
      resultArr[index] = value
      if (++orderIndex === promises.length) {
        resolve(resultArr)
      }
    }

    for (let i = 0; i < values.length; i++) {
      const promise = promises[i]
      if (promise && typeof promise.then === 'function') {
        promise.then(value => {
          processResultByKey(value, i)
        }, reject)
      } else {
        procesResultByKey(value, i)
      }
    }
  })
}

`Promise.race`

Promise.race用来处理多个异步过程，采用最快的结果。


static race(promises) {
  return new Promise((resolve, reject) => {
    for (let i = 0; i < promises.length; i++) {
      const val = promises[i]
      if (val && typeof val.then === 'function') {
        val.then(resolve, reject)
      } else {
        resolve(val)
      }
    }
  })
}

完整代码


const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

const resolvePromise = (promise, x, resolve, reject) => {
  if (promise === x) {
    return reject(
      new TypeError('Chaining cycle detected for promise#<MyPromise>')
    )
  }

  let called

  if ((typeof x === 'object' && x !== null) || typeof x === 'function') {
    try {
      const then = x.then
      if (typeof then === 'function') {
        then.call(
          x,
          y => {
            if (called) return
            called = true
            resolvePromise(promise, y, resolve, reject)
          },
          r => {
            if (called) return
            called = true
            reject(r)
          }
        )
      } else {
        resolve(x)
      }
    } catch (err) {
      if (called) return
      called = true
      reject(err)
    }
  }
}

class MyPromise {
  constructor(executor) {
    this.status = PENDING
    this.value = undefined
    this.reason = undefined

    this.onResolvedCallbacks = []
    this.onRejectedCallbacks = []

    const resolve = value => {
      if (value instanceof Promise) {
        return value.then(resolve, reject)
      }
      if (this.status === PENDING) {
        this.status = FULFILLED
        this.value = value
        this.onResolvedCallbacks.forEach(fn => fn())
      }
    }

    const reject = reason => {
      if (this.status === PENDING) {
        this.status = REJECTED
        this.reason = reason
        this.onRejectedCallbacks.forEach(fn => fn())
      }
    }

    try {
      executor(resolve, reject)
    } catch (err) {
      reject(err)
    }
  }

  then(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v
    onRejected =
      typeof onRejected === 'function'
        ? onRejected
        : err => {
            throw err
          }

    const _promise = new MyPromise((resolve, reject) => {
      if (this.status === FULFILLED) {
        setTimeout(() => {
          try {
            let x = onFulfilled(this.value)
            resolvePromise(_promise, x, resolve, reject)
          } catch (err) {
            reject(err)
          }
        }, 0)
      }

      if (this.status === REJECTED) {
        setTimeout(() => {
          try {
            const x = onRejected(this.reason)
            resolvePromise(_promise, x, resolve, reject)
          } catch (err) {
            reject(err)
          }
        }, 0)
      }

      if (this.status === PENDING) {
        this.onResolvedCallbacks.push(() => {
          setTimeout(() => {
            try {
              const x = onFulfilled(this.value)
              resolvePromise(_promise, x, resolve, reject)
            } catch (err) {
              reject(err)
            }
          }, 0)
        })

        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              const x = onRejected(this.reason)
              resolvePromise(_promise, x, resolve, reject)
            } catch (err) {
              reject(err)
            }
          }, 0)
        })
      }
    })

    return _promise
  }

  catch(errCallback) {
    return this.then(null, errCallback)
  }

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

  static all(values) {
    if (!Array.isArray(values)) {
      const type = typeof values
      return new TypeError(`TypeError: ${type} ${values} is not iterable`)
    }

    return new MyPromise((resolve, reject) => {
      const resultArr = []
      let orderIdx = 0
      const processResultByKey = (value, index) => {
        resultArr[index] = value
        if (++orderIdx === values.length) {
          resolve(resultArr)
        }
      }

      for (let i = 0; i < values.length; i++) {
        const value = values[i]
        if (value && typeof value.then === 'function') {
          value.then(value => {
            processResultByKey(value, i)
          }, reject)
        } else {
          processResultByKey(value, i)
        }
      }
    })
  }

  static race(values) {
    if (!Array.isArray(values)) {
      const type = typeof values
      return new TypeError(`TypeError: ${type} ${values} is not iterable`)
    }

    return new MyPromise((resolve, reject) => {
      for (let i = 0; i < values.length; i++) {
        const val = values[i]
        if (val && typeof val.then === 'function') {
          val.then(resolve, reject)
        } else {
          resolve(val)
        }
      }
    })
  }

  static resolve(data) {
    return new MyPromise(resolve => {
      resolve(data)
    })
  }

  static reject(reason) {
    return new Promise((_, reject) => {
      reject(reason)
    })
  }
}

const promise = new MyPromise((resolve, reject) => {
  reject('失败')
})
  .then()
  .then()
  .then(
    data => {
      console.log(data)
    },
    err => {
      console.error('error', err)
    }
  )

基础版本

then的链式调用和值穿透

实现 Promise 的其他 API

Promise.resolve()

Promise.reject()

Promise.prototype.catch()

Promise.prototype.finally

Promise.all

Promise.race