如何写出清晰优雅的代码也是调试重要的一部分，而在过去很长一段时间内，JavaScript 最令人吐槽的就是回调地狱（callback hell）了。先看一段代码：
step1(function (err, value1) { if (err) { ... return } step2(value1, function (err, value2) { if (err) { ... return } step3(value2, function (err, value3) { if (err) { ... return } // Do something with value3 }) }) })
上面代码依次执行 step1、step2、step3，且后一个函数用到了前一个函数执行的结果。这只是一个简单的例子，真实环境下可能会写出嵌套更深的回调函数，代码形成一个倒金字塔。如果使用 Promise，代码就优雅很多了，如下所示：
step1() .then(step2) .then(step3) .catch((e) => { // Do something with error })
Promise 的出现就是为了解决回调地狱的问题，它最早是由社区提出和实现的，衍生的规范也有很多，最终 ES6 采用了 Promise/A+ 规范，并将其写进了语言标准，统一了用法。
Promise 规范有很多，如 Promise/A，Promise/B，Promise/D 以及 Promise/A 的升级版 Promise/A+，细节各有不同，最终 ES6 中采用了 Promise/A+ 规范。在讲解 Promise 实现之前，当然要先了解 Promise/A+ 规范，Promise/A+ 规范参考：
规范虽然不长，但细节也比较多，笔者挑出几个要点简单说明一下：
Promise 的 API 并不多，但是 Promise 并不简单，如何彻底理解并玩转 Promise 呢？当然是从头实现一遍 Promise 啦。我们假设读者已经熟悉了 Promise 的基本用法，本节内容分为两部分：第一部分讲解如何从零开始实现一个 Promise，第二部分通过十道题巩固读者对 Promise 的理解。
我们知道 Promise 是本质是一个构造函数，需要用 new 调用，并有以下几个 api：
function Promise (resolver) {} Promise.prototype.then = function () {} Promise.prototype.catch = function () {} Promise.resolve = function () {} Promise.reject = function () {} Promise.all = function () {} Promise.race = function () {}
创建以下初始代码，然后开始一步一步构建完整的 Promise 实现。如下所示：
function INTERNAL () {} function isFunction (func) { return typeof func === 'function' } function isObject (obj) { return typeof obj === 'object' } function isArray (arr) { return Array.isArray(arr) } const PENDING = 'pending' const FULFILLED = 'fulfilled' const REJECTED = 'rejected' module.exports = Promise function Promise (resolver) { if (!isFunction(resolver)) { throw new TypeError('resolver must be a function') } this.state = PENDING this.value = void 0 this.queue = [] if (resolver !== INTERNAL) { safelyResolveThen(this, resolver) } }
注意：以下 promise 均指代 Promise 实例。
INTERNAL 就是一个空函数，后面会用来传入 Promise 构造函数生成一个 promise 实例。定义了 3 个辅助函数：isFunction、isObject 和 isArray。定义了 3 种状态：PENDING、FULFILLED 和 REJECTED。safelyResolveThen 后面会讲。promise 内部有三个变量：
笔者发布了一个 Promise/A+ 规范实现的模块——appoint，我们拿这个模块研究一下它是如何实现 Promise 的。看一段代码：
const Promise = require('appoint') const promise = new Promise((resolve) => { setTimeout(() => { resolve('haha') }, 1000) }) const a = promise.then(function onSuccess () {}) const b = promise.catch(function onError () {}) console.dir(promise, { depth: 10 }) console.log(promise.queue[0].promise === a) console.log(promise.queue[1].promise === b)
运行后打印出：
Promise { state: 'pending', value: undefined, queue: [ QueueItem { promise: Promise { state: 'pending', value: undefined, queue: [] }, callFulfilled: [Function], callRejected: [Function] }, QueueItem { promise: Promise { state: 'pending', value: undefined, queue: [] }, callFulfilled: [Function], callRejected: [Function] } ] } true true
注意：原生 Promise 是没有 queue 属性的，appoint 的实现中添加了这个属性。
可以看出，queue 数组中有两个对象。因为规范中规定：then 方法可以被同一个 promise 调用多次。上例中在调用 .then 和 .catch 时 promise 并没有被 resolve，所以将 .then 和 .catch 生成的新 promise（a 和 b） 和正确时的回调（onSuccess 包装成 callFulfilled）和错误时的回调（onError 包装成 callRejected）生成一个 QueueItem 实例并 push 到 queue 数组里，所以两个 console.log 都打印 true。当 promise 状态改变时遍历内部 queue 数组，统一执行成功（callFulfilled）或失败（callRejected）的回调（传入 promise 的 value 值），生成的结果分别设置 a 和 b 的 state 和 value，这就是 Promise 实现的基本原理。 再来看另一个例子：
const Promise = require('appoint') const promise = new Promise((resolve) => { setTimeout(() => { resolve('haha') }, 1000) }) promise .then(() => {}) .then(() => {}) .then(() => {}) console.dir(promise, { depth: 10 })
打印出：
Promise { state: 'pending', value: undefined, queue: [ QueueItem { promise: Promise { state: 'pending', value: undefined, queue: [ QueueItem { promise: Promise { state: 'pending', value: undefined, queue: [ QueueItem { promise: Promise { state: 'pending', value: undefined, queue: [] }, callFulfilled: [Function], callRejected: [Function] } ] }, callFulfilled: [Function], callRejected: [Function] } ] }, callFulfilled: [Function], callRejected: [Function] } ] }
链式调用了 3 次 .then，每次调用 .then 将它生成的 promise 放到了调用它的 promise 队列里，形成了 3 层调用关系。当最外层的 promise 状态改变时，遍历它的 queue 数组调用对应的回调，设置子 promise 的 state 和 value 并遍历它的 queue 数组调用对应的回调......以此类推。
注意：这里 queue 是嵌套的，而不是像上个例子中 queue 是平铺的。
接下来完成 safelyResolveThen 的逻辑，代码如下：
function safelyResolveThen (self, then) { let called = false try { then(function (value) { if (called) { return } called = true doResolve(self, value) }, function (error) { if (called) { return } called = true doReject(self, error) }) } catch (error) { if (called) { return } called = true doReject(self, error) } }
safelyResolveThen 顾名思义用来 “安全的执行 then 函数”，这里的 then 函数指 “第一个参数是 resolve 函数第二个参数是 reject 函数的函数”，适用于以下两种情况：
new Promise(function resolver (resolve, reject) { setTimeout(() => { resolve('haha') }, 1000) })
promise.then(resolve, reject)
safelyResolveThen 有 3 个作用：
new Promise(function resolver (resolve, reject) { throw new Error('Oops') })
const Promise = require('appoint') const promise = new Promise(function resolver (resolve, reject) { setTimeout(() => { resolve('haha') }, 1000) reject('error') }) promise.then(console.log) promise.catch(console.error)
打印 error，不会再打印 haha。
doResolve 和 doReject 相关代码如下：
function doResolve (self, value) { try { const then = getThen(value) if (then) { safelyResolveThen(self, then) } else { self.state = FULFILLED self.value = value self.queue.forEach(function (queueItem) { queueItem.callFulfilled(value) }) } return self } catch (error) { return doReject(self, error) } } function doReject (self, error) { self.state = REJECTED self.value = error self.queue.forEach(function (queueItem) { queueItem.callRejected(error) }) return self }
doReject 用来设置 promise 的 state 为 REJECTED，value 为 error，然后遍历 queue，设置所有子 promise 的状态为 REJECTED 和值为 error。doResolve 结合 safelyResolveThen 使用不断地解包 promise，直至返回值是非 promise 对象后，设置 promise 的状态和值，然后设置子 promise 的状态和值。
这里有个辅助函数 getThen：
function getThen (promise) { const then = promise && promise.then if (promise && (isObject(promise) || isFunction(promise)) && isFunction(then)) { return function applyThen () { then.apply(promise, arguments) } } }
getThen 实现了规范中规定的：如果 then 是函数，将 x（即被调用的 promise） 作为函数的 this 调用。
接下来实现 Promise.prototype.then 和 Promise.prototype.catch，代码如下：
Promise.prototype.then = function (onFulfilled, onRejected) { if ((!isFunction(onFulfilled) && this.state === FULFILLED) || (!isFunction(onRejected) && this.state === REJECTED)) { return this } const promise = new this.constructor(INTERNAL) if (this.state !== PENDING) { const resolver = this.state === FULFILLED ? onFulfilled : onRejected unwrap(promise, resolver, this.value) } else { this.queue.push(new QueueItem(promise, onFulfilled, onRejected)) } return promise } Promise.prototype.catch = function (onRejected) { return this.then(null, onRejected) }
上述代码中的 return this 实现了值穿透，后面会细讲。可以看出，then 方法中生成了一个新的 promise 然后返回。如果 promise 的状态改变了，则调用 unwrap，否则将生成的 promise 加入到当前 promise 的回调队列 queue 里，之前已经讲解了如何消费 queue。有 3 点需要讲解：
return this
if (resolver !== INTERNAL) { safelyResolveThen(this, resolver) }
function QueueItem (promise, onFulfilled, onRejected) { this.promise = promise this.callFulfilled = function (value) { doResolve(this.promise, value) } this.callRejected = function (error) { doReject(this.promise, error) } if (isFunction(onFulfilled)) { this.callFulfilled = function (value) { unwrap(this.promise, onFulfilled, value) } } if (isFunction(onRejected)) { this.callRejected = function (error) { unwrap(this.promise, onRejected, error) } } }
promise 为 then 生成的新 promise，onFulfilled 和 onRejected 即是 then 参数中的 onFulfilled 和 onRejected。从上面代码可以看出：当 promise 状态变为 FULFILLED 时，之前注册的 then 函数通过 callFulfilled 调用 unwrap 进行解包最终得出 promise 的状态和值；之前注册的 catch 函数，用 callRejected 直接调用 doReject，设置队列里 promise 的状态和值。当 promise 状态变为 REJECTED 类似。
function unwrap (promise, func, value) { process.nextTick(function () { let returnValue try { returnValue = func(value) } catch (error) { return doReject(promise, error) } if (returnValue === promise) { doReject(promise, new TypeError('Cannot resolve promise with itself')) } else { doResolve(promise, returnValue) } }) }
unwrap 函数从名字也可以看出是用来解包的，即拿到父 promise 的结果设置当前 promise 的状态和值。第一个参数是 promise，第二个参数是父 promise 的 then 的回调（onFulfilled/onRejected），第三个参数是父 promise 的值（正常值/错误）。有 3 点需要说明：
const Promise = require('appoint') const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('haha') }, 1000) }) promise.then(() => { promise.then(() => { console.log('1') }) console.log('2') })
打印 2 1，去掉 process.nextTick 则打印 1 2。
promise.then(() => { throw new Error('haha') }) promise.catch(() => { throw new Error('haha') })
const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('haha') }, 1000) }) const a = promise.then(() => { return a }) a.catch(console.log)// [TypeError: Chaining cycle detected for promise #<Promise>]
注意：promise.catch(onRejected) 就是 promise.then(null, onRejected) 的语法糖。
至此，Promise 的核心部分就实现完了。
上面提到过好几次值穿透，什么是值穿透呢？上面的 Promise.prototype.then 的实现中有这么一段代码：
Promise.prototype.then = function (onFulfilled, onRejected) { if ((!isFunction(onFulfilled) && this.state === FULFILLED) || (!isFunction(onRejected) && this.state === REJECTED)) { return this } ... };
值穿透即传入 then/catch 的参数如果不为函数，则忽略该值，返回上一个 promise 的结果。看一段代码：
const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('haha') }, 1000) }) promise .then('hehe') .then(console.log)
最终打印 haha 而不是 hehe。
通过 return this 只实现了值穿透的一种情况，其实值穿透有两种情况：
const Promise = require('appoint') const promise = new Promise(function (resolve) { setTimeout(() => { resolve('haha') }, 1000) }) promise.then(() => { promise.then().then((res) => {// (1) console.log(res)// haha }) promise.catch().then((res) => {// (2) console.log(res)// haha }) console.log(promise.then() === promise.catch())// true console.log(promise.then(1) === promise.catch({ name: 'nswbmw' }))// true })
上述代码 (1)、(2) 处 promise 已经是 FULFILLED 了符合条件所以执行了 return this。
const Promise = require('appoint') const promise = new Promise((resolve) => { setTimeout(() => { resolve('haha') }, 1000) }) const a = promise.then() a.then((res) => { console.log(res)// haha }) const b = promise.catch() b.then((res) => { console.log(res)// haha }) console.log(a === b)// false
Promise.resolve 和 Promise.reject 是 Promise 的两个静态方法，用来快捷的生成一个状态为 fulfilled 或者 rejected 的 promise 实例。代码如下：
Promise.resolve = resolve function resolve (value) { if (value instanceof this) { return value } return doResolve(new this(INTERNAL), value) } Promise.reject = reject function reject (reason) { return doReject(new this(INTERNAL), reason) }
当 Promise.resolve 参数是一个 promise 时，直接返回该值。
Promise.all 接收一个数组，用来并行执行一组 promise。代码如下：
Promise.all = all function all (iterable) { const self = this if (!isArray(iterable)) { return this.reject(new TypeError('must be an array')) } const len = iterable.length let called = false if (!len) { return this.resolve([]) } const values = new Array(len) let resolved = 0 let i = -1 const promise = new this(INTERNAL) while (++i < len) { allResolver(iterable[i], i) } return promise function allResolver (value, i) { self.resolve(value).then(resolveFromAll, function (error) { if (!called) { called = true doReject(promise, error) } }) function resolveFromAll (outValue) { values[i] = outValue if (++resolved === len && !called) { called = true doResolve(promise, values) } } } }
Promise.all 用来并行执行多个 promise/值，当所有 promise/值执行完毕或有一个 promise 状态变为 rejected 时返回。以上代码可以看出：
Promise.race 接收一个数组，当数组中有一个 promise 状态发生改变（ pending -> fulfilled/rejected）时返回。
Promise.race = race function race (iterable) { const self = this if (!isArray(iterable)) { return this.reject(new TypeError('must be an array')) } const len = iterable.length let called = false if (!len) { return this.resolve([]) } let i = -1 const promise = new this(INTERNAL) while (++i < len) { resolver(iterable[i]) } return promise function resolver (value) { self.resolve(value).then(function (response) { if (!called) { called = true doResolve(promise, response) } }, function (error) { if (!called) { called = true doReject(promise, error) } }) } }
Promise.race 与 Promise.all 代码相近，只不过这里用 called 控制只要有任何一个 promise 状态改变则立即去设置返回的 promise 的状态和值。
至此，Promise 的实现全部讲解完毕。
现在，我们以十道题巩固一下前面所学到的 Promise 的知识点。
const promise = new Promise((resolve, reject) => { console.log(1) resolve() console.log(2) }) promise.then(() => { console.log(3) }) console.log(4)
运行结果：
1 2 4 3
解释：Promise 构造函数是同步执行的，promise.then 中的函数是异步执行的。
const promise1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('success') }, 1000) }) const promise2 = promise1.then(() => { throw new Error('error!!!') }) console.log('promise1', promise1) console.log('promise2', promise2) setTimeout(() => { console.log('promise1', promise1) console.log('promise2', promise2) }, 2000)
promise1 Promise { <pending> } promise2 Promise { <pending> } (node:50928) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: error!!! (node:50928) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. promise1 Promise { 'success' } promise2 Promise { <rejected> Error: error!!! at promise.then (...) at <anonymous> }
解释：promise 有 3 种状态：pending、fulfilled 或 rejected。状态改变只能是 pending->fulfilled 或者 pending->rejected，状态一旦改变则不能再变。上面的 promise2 并不是 promise1，而是返回的一个新的 Promise 实例。
const promise = new Promise((resolve, reject) => { resolve('success1') reject('error') resolve('success2') }) promise .then((res) => { console.log('then: ', res) }) .catch((err) => { console.log('catch: ', err) })
then: success1
解释：构造函数中的 resolve 或 reject 只有在第 1 次执行时有效，多次调用没有任何作用，再次印证代码二的结论：promise 状态一旦改变则不能再变。
再看两个例子：
const promise = new Promise((resolve, reject) => { console.log(1) return Promise.reject(new Error('haha')) }) promise.then((res) => { console.log(2, res) }).catch((err) => { console.error(3, err) }) console.log(4) console.log(promise)
1 4 Promise { <pending> } (node:22493) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: haha (node:22493) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
const promise = new Promise((resolve, reject) => { console.log(1) throw new Error('haha') }) promise.then((res) => { console.log(2, res) }).catch((err) => { console.error(3, err) }) console.log(4) console.log(promise)
1 4 Promise { <rejected> Error: haha at Promise (/Users/nswbmw/Desktop/test/app.js:6:9) ... 3 Error: haha at Promise (/Users/nswbmw/Desktop/test/app.js:6:9) ...
解释：构造函数内只能通过调用 resolve(pending->fullfiled) 或者 reject(pending->rejected) 或者 throw 一个 error(pending->rejected) 改变状态。所以第一个例子的 promise 状态是 pending，也就不会调用 .then/.catch。
Promise.resolve(1) .then((res) => { console.log(res) return 2 }) .catch((err) => { return 3 }) .then((res) => { console.log(res) })
1 2
解释：promise 可以链式调用。提起链式调用我们通常会想到通过 return this 实现，不过 Promise 并不是这样实现的。promise 在每次调用 .then 或者 .catch 时都会返回一个新的 promise，从而可以实现链式调用。
const promise = new Promise((resolve, reject) => { setTimeout(() => { console.log('once') resolve('success') }, 1000) }) const start = Date.now() promise.then((res) => { console.log(res, Date.now() - start) }) promise.then((res) => { console.log(res, Date.now() - start) })
once success 1005 success 1007
解释：promise 的 .then 或者 .catch 可以被调用多次，但这里 Promise 构造函数只执行一次。或者说，promise 内部状态一经改变，并且有了一个值，则后续在每次调用 .then 或者 .catch 时都会直接拿到该值。
Promise.resolve() .then(() => { return new Error('error!!!') }) .then((res) => { console.log('then: ', res) }) .catch((err) => { console.log('catch: ', err) })
then: Error: error!!! at Promise.resolve.then (...) at ...
解释：.then 或者 .catch 中 return 一个 error 对象并不会抛出错误，所以不会被后续的 .catch 捕获，需要改成如下其中一种：
因为返回任意一个非 promise 的值都会被包裹成 promise 对象，即 return new Error('error!!!') 等价于 return Promise.resolve(new Error('error!!!'))。
return new Error('error!!!')
return Promise.resolve(new Error('error!!!'))
const promise = Promise.resolve() .then(() => { return promise }) promise.catch(console.error)
TypeError: Chaining cycle detected for promise #<Promise> at <anonymous> at process._tickCallback (internal/process/next_tick.js:188:7) at Function.Module.runMain (module.js:667:11) at startup (bootstrap_node.js:187:16) at bootstrap_node.js:607:3
解释：.then 或 .catch 返回的值不能是 promise 本身，否则会造成死循环。类似于：
process.nextTick(function tick () { console.log('tick') process.nextTick(tick) })
Promise.resolve(1) .then(2) .then(Promise.resolve(3)) .then(console.log)
1
解释：.then 或者 .catch 的参数期望是函数，传入非函数则会发生值穿透。
Promise.resolve() .then(function success (res) { throw new Error('error') }, function fail1 (e) { console.error('fail1: ', e) }) .catch(function fail2 (e) { console.error('fail2: ', e) })
fail2: Error: error at success (...) at ...
解释：.then 可以接收两个参数，第 1 个是处理成功的函数，第 2 个是处理错误的函数。.catch 是 .then 第 2 个参数的简便写法，但是在用法上有一点需要注意：.then 的第 2 个处理错误的函数（fail1）捕获不了第 1 个处理成功的函数（success）抛出的错误，而后续的 .catch 方法（fail2）可以捕获之前的错误。当然，以下代码也可以：
Promise.resolve() .then(function success1 (res) { throw new Error('error') }, function fail1 (e) { console.error('fail1: ', e) }) .then(function success2 (res) { }, function fail2 (e) { console.error('fail2: ', e) })
Promise.resolve() .then(() => { console.log('then') }) process.nextTick(() => { console.log('nextTick') }) setImmediate(() => { console.log('setImmediate') }) console.log('end')
end nextTick then setImmediate
解释：process.nextTick 和 promise.then 都属于 microtask（但 process.nextTick 的优先级大于 promise.then），而 setImmediate 属于 macrotask，在事件循环的 check 阶段执行。事件循环的每个阶段（macrotask）之间都会执行 microtask，以上代码本身（macrotask）在执行完后会执行一次 microtask。
上一节：2.4 cpu-memory-monitor
下一节：3.2 Async + Await
Copyright© 2013-2020
All Rights Reserved 京ICP备2023019179号-8