如何手写一个 Promise polyfill

前言

如果没有自己尝试去实现一个 Promise，估计很难知道 Promise 里的一些细节，面试官问一些比较刁的问题，也答不出来。比如：

一，trycatch 可以捕获到 Promise 里的错误吗？

try {
  new Promise((resolve, reject) => {
    throw 'err'
    })
  } catch (error) {
  console.log(error)
}

答案是不行。Promise 的执行器里，已经对错误做了 trycatch 处理。

二，then 的回调函数属于微任务

console.log(1)
new Promise((resolve, reject) => {
    resolve(2)
}).then(_ => { console.log(_) })
console.log(3)

以上的输出顺序是不是 1 2 3 ？实现过 Promise 就会知道要做到顺序执行也是可以的（仅仅是这种情况），但是实际上 then 的是一个异步的微任务。

推荐阅读 promise a+ 的规范，再看看现有的一些实现，参考链接里有更好的实现，可以来学习。下面是我实现着来玩的（功能不完整），Promise 核心代码其实也不多，遇到问题解决问题的结果：

MutationObserver 提升性能

MutationObserver 的回调函数会比 setTimeout、requestAnimationFrame 的回调函数先执行，更适合来模拟 Promise 的 then 这一特性，性能更好。同时，也可以用来监听 dom 的增删等。

扩展阅读

• Promises/A+
• 面试官：“你能手写一个 Promise 吗”
• promise-polyfill
• setImmediate polyfill for the browser and node