从标准实现入手理解 Promise
为什么写这篇
网上解释已经一抓一大把，但是个人觉得大部分文章可以实现 Promise/A+，但是对真实细节没完全实现：
- 真正的 microtask（大部分用的 setTimeout 代替）
- then 传入回调函数返回 Promise 对象的情况
- 构造函数 executor 的细节，以及 executor 的 resolve 参数传入 Promise 对象的情况
- Promise.resolve 传入 Promise 对象的情况
- Promise 各种静态函数传入的是可迭代对象而非数组
- 介绍清楚循环调用阻止的情况和多次 resolve 阻止的情况
本人用自己浅薄的知识尝试去覆盖最真实的 Promise 所有实现情况，并且用纯 js 实现，从中理解到真正的 Promise 是怎么样的。
什么是 Promise
Promise 是异步编程的一种解决方案，比传统的解决方案回调函数和事件更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理，并非只能解决读取接口这种异步操作。
在此之前如何解决异步操作
在 Promise 出现之前其实也有出现了类 Promise 的库，例如Q和JQueryDeferred 等。但是通用的解决方案就是回调函数。
回调函数本身是没问题的，但是如果需要一个接一个调用（嵌套）时，很容易掉入回调地狱
ajax({
url: './index',
success: function (value) {
ajax({
url: value.url,
success: function (value2) {
ajax({
url: value2.url,
success: function (value3) {
ajax({
url: value3.url,
success: function (value4) {
// .. do something else
},
});
},
});
},
});
},
});
在有 Promise 后就可以写成：
const request = url =>
new Promise((resolve, reject) => {
ajax({
url,
success: resolve,
fail: reject,
});
});
request('.index')
.then(({ url }) => request(url))
.then(({ url }) => request(url))
.then(({ url }) => request(url))
.then(value4 => {
// .. do something else
});
甚至在配合 es2017 中的 async 函数可以写成：
(async () => {
const { url } = await request('.index');
const { url: url2 } = await request(url);
const { url: url3 } = await request(url2);
const value4 = await request(url3);
// .. do something else
})();
整个代码就清晰易懂而且优雅简洁。
Promise 特点
Promise对象有以下两个特点。
（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从 pending 变为 fulfilled 和从 pending 变为 rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。
Promise 的 api 和用法
这里就不详细列举了，详细可以参考 es6 入门中的Promise 章。
下面会默认读者已清楚了解 Promise 的 api。
在开始前...
是否能说清楚下面打印的是什么，而且说出思路么？
new Promise(res => {
res();
console.log(1);
// 代码块1
})
.then(() => {
// 代码块2
console.log(2);
new Promise(res => {
res();
console.log(3);
})
.then(() => {
// 代码块3
console.log(4);
new Promise(res => {
res();
console.log(5);
}).then(() => {
// 代码块4
console.log(8);
});
})
.then(() => {
// 代码块5
console.log(9);
new Promise(res => {
res();
console.log(10);
}).then(() => {
// 代码块6
console.log(12);
});
});
Promise.resolve()
.then(() => {
// 代码块7
console.log(6);
})
.then(() => {
// 代码块8
console.log(11);
});
})
.then(() => {
// 代码块9
console.log(7);
});
Promise.reject(
new Promise((res, rej) => {
setTimeout(() => {
rej(133222);
res(444);
}, 2000);
})
)
.then(rs => console.log('then', rs))
.catch(rs => console.log('catch', rs))
.then(rs => console.log('then', rs))
.catch(rs => console.log('catch', rs));
Promise.resolve(
new Promise((res, rej) => {
setTimeout(() => {
rej(133222);
res(444);
}, 2000);
})
)
.then(rs => console.log('then', rs))
.catch(rs => console.log('catch', rs))
.then(rs => console.log('then', rs))
.catch(rs => console.log('catch', rs));
new Promise((res, rej) => {
res(Promise.reject(123));
})
.then(rs => console.log('then', rs))
.catch(rs => console.log('catch', rs));
new Promise((res, rej) => {
rej(Promise.resolve(123));
})
.then(rs => console.log('then', rs))
.catch(rs => console.log('catch', rs));
new Promise(res => res(Promise.resolve())).then(() => console.log(2));
Promise.resolve(Promise.resolve()).then(() => console.log(1));
Promise.resolve()
.then(() => {
console.log(1);
return Promise.resolve(5);
})
.then(r => {
console.log(r);
});
Promise.resolve()
.then(() => {
console.log(2);
})
.then(() => {
console.log(3);
})
.then(() => {
console.log(4);
})
.then(() => {
console.log(6);
});
可以自己尝试思考再去控制台尝试，如果回答不上就应该往下看啦
Promise 规范
关于 Promise 的规范最早是由 commonjs 社区提出，毕竟多人接收的就是Promise/A，后面因规范较为简单所以在这基础上提出了Promise/A+，这也是业界和 ES6 使用的标准，而 ES6 在这标准上还新增了 Promise.resolve、Promise.reject、Promise.all、Promise.race、Promise.prototype.catch、Promise.allSettled、Promise.prototype.finally 等方法。
而测试是否符合 Promise/A+标准的可以使用promises-aplus-tests库来测试，使用方法为在自己实现的 MyPromise 文件中加入如下代码导出
// MyPromise.js
MyPromise.defer = MyPromise.deferred = function () {
let dfd = {};
dfd.promise = new MyPromise((resolve, reject) => {
dfd.resolve = resolve;
dfd.reject = reject;
});
return dfd;
};
module.exports = MyPromise;
然后可以安装并在文件目录内运行
npm install -g promises-aplus-tests
promises-aplus-tests MyPromise.js
微任务创建器
我们都知道 Promise 的 then 创建的是异步任务（microtask），而我们需要实现 Promise 的话当然不能用他来创建，网上各种实现可能基本都是 setTimeout，这个是将任务推入下一宏任务（macrotask）中。所以我们需要一个微任务创建器，这时候就需要用到几个 api 了：一个是queueMicrotask，还有MutationObserver，这两个都是可以将回调函数推入微任务队列的，然后我们可以先封装一个降级方案：
// 判断是否函数
const isFunction = target => typeof target === 'function';
// 判断是否原生方法
const isNativeFunction = Ctor =>
isFunction(Ctor) && /native code/.test(Ctor.toString());
// 推入微任务队列
const nextTaskQueue = cb => {
if (
typeof queueMicrotask !== 'undefined' &&
isNativeFunction(queueMicrotask)
) {
queueMicrotask(cb);
} else if (
typeof MutationObserver !== 'undefined' &&
(isNativeFunction(MutationObserver) ||
MutationObserver.toString() === '[object MutationObserverConstructor]')
) {
const observer = new MutationObserver(cb);
const node = document.createTextNode('1');
observer.observe(node, {
characterData: true,
});
node.data = '2';
} else if (typeof process !== 'undefined' && isFunction(process.nextTick)) {
process.nextTick(cb);
} else {
setTimeout(() => {
cb();
}, 0);
}
};
如此，后面我们需要创建异步 tick 就可以使用这个nextTaskQueue。
Promise 结构
可以从日常使用 Promise 中了解到，Promise 需要 new 出实例，并且传入回调函数，而回调函数接收两个参数（resolve、reject），回调函数会立刻执行。返回的 Promise 实例中可调用 then 或者 catch 接收完成和错误。
Promise 拥有三种状态分别为pending等待中、fulfilled已完成、rejected已拒绝，并且初始为等待中，且如果更改了状态则无法再更改。
而Promise.prototype.then可以接收两个参数，分别是onFulfilled和onRejected回调函数，Promise.prototype.catch只能接收onRejected。
const STATUS = {
PENDING: 'PENDING', // 等待中
FULFILLED: 'FULFILLED', // 已完成
REJECTED: 'REJECTED', // 已拒绝
};
class MyPromise {
status = STATUS.PENDING; // 初始化状态为等待中
constructor(executor) {
const resolve = value => {};
const reject = reason => {};
try {
executor(resolve, reject); // 实例化即刻执行
} catch (err) {
reject(err); // 发生错误则被捕捉
}
}
then(onFulfiled, onRejected) {}
}
我们发现 Promise 对象在每次使用 then 或者 catch 后获取的值都会一致不变，而且在完成前多个 then 或者 catch 监听会在完成、拒绝后一个个调用，所以知道这里会保存值和错误以及维护一个完成和拒绝的队列
const STATUS = {
PENDING: 'PENDING', // 等待中
FULFILLED: 'FULFILLED', // 已完成
REJECTED: 'REJECTED', // 已拒绝
};
class MyPromise {
_resolveQueue = []; // 完成回调队列
_rejectQueue = []; // 拒绝回调队列
result = void 0; // 完成的值
state = STATUS.PENDING; // 初始化状态为等待中
constructor(executor) {
const resolve = value => {
// 只有在等待中的状态才可以resolve
if (this.state === STATUS.PENDING) {
try {
// 如果传入resolve内的为thenable对象，则以它的状态为准
resolvePromise(this, value, realResolve, reject);
} catch (err) {
reject(err);
}
}
};
const realResolve = value => {
// 只有在等待中的状态才可以resolve
this.state = STATUS.FULFILLED; // 修改状态
this.result = value; // 保存值
// 真正的创建了微任务的封装
nextTaskQueue(() => {
while (this._resolveQueue.length) {
const callback = this._resolveQueue.shift();
callback(value); // 一个个执行
}
});
};
const reject = reason => {
// 与resolve一致，只是修改的状态和保存的理由以及执行的队列不一样
if (this.state === STATUS.PENDING) {
this.state = STATUS.REJECTED;
this.result = reason;
nextTaskQueue(() => {
while (this._rejectQueue.length) {
const callback = this._rejectQueue.shift(); // 获取拒绝回调队列
callback(reason);
}
});
}
};
try {
executor(resolve, reject); // 实例化即刻执行
} catch (err) {
reject(err); // 发生错误则被捕捉
}
}
then(onFulfiled, onRejected) {}
}
到这里，构造函数已经差不多了，剩下的开始实现then方法。
我们知道，then 后面可以链式调用 then，并且then 获取的值为上一个 then 返回的新 Promise 对象中的值，很多人误认为链式调用获取的是链式的头的 Promise，其实不然，Promise 每个 then 都会创建一个新 Promise，所以你下一个 then 跟最前面的 Promise 不一定有关系。
而且，如果 then 中传入的不是函数，则会直接传出，直到被传入函数的 then 捕捉。
然后，在调用 then 时，Promise 对象可能为三种状态，但是即使是已完成或已拒绝，也不会立刻执行，而是被推入微任务队列中。
class MyPromise {
then(onFulfilled, onRejected) {
onFulfilled =
typeof onFulfilled === 'function' ? onFulfilled : value => value; // 如果不是函数则传递给下一个
onRejected =
typeof onRejected === 'function'
? onRejected
: reason => {
throw reason;
};
return new MyPromise((resolve, reject) => {
if (this.state === STATUS.FULFILLED) {
nextTaskQueue(() => {
// 即使Promise对象是已完成，也不会立刻执行
const result = onFulfilled(this.result); // 传入的回调可以获取值
resolve(result);
});
} else if (this.state === STATUS.REJECTED) {
nextTaskQueue(() => {
// 即使Promise对象是已拒绝，也不会立刻执行
const result = onRejected(this.result); // 传入的回调可以拒绝理由
reject(result);
});
} else if (this.state === STATUS.PENDING) {
// 如果是等待中，则分别推入回调队列中
this._resolveQueue.push(() => {
const result = onFulfilled(this.result);
resolve(result);
});
this._rejectQueue.push(() => {
const result = onRejected(this.result);
reject(result);
});
}
});
}
}
到这里为止，基本差不多了，然而并没有这么简单。回调函数可能是任何值，包括返回了一个 Promise 对象，这种情况需要以返回的 Promise 为准。并且如果是这种情况，后面 then 会被延迟两个 tick 执行，具体实现可以参考 V8 引擎对ResolvePromise和PromiseResolveThenableJob的实现，这里不作深入讲解。
所以这里可以封装出一个方法专门处理 Promise 以及其回调，以适配所有标准
const resolvePromise = (newPromise, result, resolve, reject) => {
/**
* 规范2.3.1，避免循环引用
* e.g. const p = MyPromise.resolve().then(() => p);
*/
if (newPromise === result) {
return reject(new TypeError('Chaining cycle detected for promise'));
}
/**
* 用来判断resolvePormise是否已经执行过了，如果执行过resolve或者reject就不要再往下走resolve或者reject
* 在一些返回thenable对象中，连续调用多次回调的情况
* e.g. then(() => {
* return {
* then(resolve){
* resolve(1);
* resolve(2);
* }
* }
* })
* 网上大部分的都没说这个情况到底是什么
*/
let called = false;
if (result !== null && (typeof result === 'object' || isFunction(result))) {
try {
const { then } = result;
if (isFunction(then)) {
// 规范2.3.3.3 如果result是个thenable对象，则调用其then方法，当他是Promise
then.call(
result,
value => {
if (!called) {
called = true;
// 现代浏览器中，如果then返回是thenable对象则会延迟一次执行，而本身的then又会延迟，所以其实是两次
nextTaskQueue(() => {
resolvePromise(newPromise, value, resolve, reject); // 这里需要递归取值，直到不是Promise为止
});
}
},
reason => {
if (!called) {
called = true;
nextTaskQueue(() => {
reject(reason);
});
}
}
);
} else {
// 规范2.3.3.4 如果 result不是thenable对象，则返回fulfilled
resolve(result);
}
} catch (err) {
if (!called) {
called = true;
reject(err);
}
}
} else {
resolve(result);
}
};
所以 then 方法改为
then(onFulfilled, onRejected) {
onFulfilled =
typeof onFulfilled === 'function' ? onFulfilled : value => value; // 如果不是函数则传递给下一个
onRejected =
typeof onRejected === 'function'
? onRejected
: reason => {
throw reason;
};
let newPromise;
return (newPromise = new MyPromise((resolve, reject) => {
if (this.state === STATUS.FULFILLED) {
nextTaskQueue(() => {
// 即使Promise对象是已完成，也不会立刻执行
try {
const result = onFulfilled(this.result); // 传入的回调可以获取值
resolvePromise(newPromise, result, resolve, reject);
} catch (err) {
reject(err);
}
});
} else if (this.state === STATUS.REJECTED) {
nextTaskQueue(() => {
// 即使Promise对象是已拒绝，也不会立刻执行
try {
const result = onRejected(this.result); // 传入的回调可以拒绝理由
resolvePromise(newPromise, result, resolve, reject);
} catch (err) {
reject(err);
}
});
} else if (this.state === STATUS.PENDING) {
// 如果是等待中，则分别推入回调队列中
this._resolveQueue.push(() => {
try {
const result = onFulfilled(this.result);
resolvePromise(newPromise, result, resolve, reject);
} catch (err) {
reject(err);
}
});
this._rejectQueue.push(() => {
try {
const result = onRejected(this.result);
resolvePromise(newPromise, result, resolve, reject);
} catch (err) {
reject(err);
}
});
}
}));
}
最后加入上面说的测试导出，跑一次测试即可
[图片上传失败...(image-67c4ae-1621751597335)]
827 个测试项全通过~！
剩下的可以增加一些 api 实现和判断即可。
但是要注意的是，静态方法包括 all、race、allSettled、any 等，传入的是任意可迭代对象，包括字符串等，如果传入的迭代对象中的子元素如果非 Promise 对象，则直接返回，而即使是非 Promise 对象，也是需要推入微任务在下一 tick 执行（很多实现忽略了这些）。
tips
因为个人在网上看了很多类似的，但是并没有很完整的解释细节，例如 called 是做什么的。
所以自己总结了一下。
因为发现很多同学觉得 Promise 就是用来封装读接口的通讯方法的，这里表示 Promise不仅仅可以做读接口封装，还可以做很多有趣的封装
例如：
- wait 等待几秒后执行
const wait = time =>
new Promise(resolve => {
const timer = setTimeout(() => resolve(timer), time);
});
(async () => {
console.log(1);
await wait(2000);
console.log(2);
})();
// print 1
// wait for 2 seconds
// print 2
- 早期的小程序 api promise 化，因为本人 16 年开始接触小程序，那时候小程序全是 success 和 fail 回调，用起来很头疼（现在全支持 thenable 调用了），所以做了个 promisify 函数。
const promisify =
wxapi =>
(options, ...args) =>
new Promise((resolve, reject) =>
wxapi.apply(null, [
{
...options,
success: resolve,
fail: err => {
console.log(err);
reject(err);
},
},
...args,
])
);
(async () => {
await promisify(wx.login)();
await promisify(wx.checkSession)();
// session有效！
})();
const loading = (title = '加载中..') => {
promisify(wx.showLoading)({
title: i18n.getLocaleByName(title),
mask: true,
});
};
最后
在了解了源码后，其实可以延伸出一些 Promise 执行顺序的问题
new Promise(res => {
res();
console.log(1);
// 代码块1
})
.then(() => {
// 代码块2
console.log(2);
new Promise(res => {
res();
console.log(3);
})
.then(() => {
// 代码块3
console.log(4);
new Promise(res => {
res();
console.log(5);
}).then(() => {
// 代码块4
console.log(8);
});
})
.then(() => {
// 代码块5
console.log(9);
new Promise(res => {
res();
console.log(10);
}).then(() => {
// 代码块6
console.log(12);
});
});
Promise.resolve()
.then(() => {
// 代码块7
console.log(6);
})
.then(() => {
// 代码块8
console.log(11);
});
})
.then(() => {
// 代码块9
console.log(7);
});
以上可以解释一下执行顺序
- tick1、代码块 1先执行，resolve 了，将代码块 2推入 nextTick，
打印1 - tick2、代码块 2执行，
打印2，创建 Promise，resolve 了所以将代码块 3推入 nextTick，打印3；往下走，Promise.resolve 创建了一个 fulfilled 的 Promise，所以代码块 7推入 nextTick，执行完毕代码块 2，所以代码块 9被推入 nextTick - tick3、代码块 3执行，
打印4，创建 Promise，resolve 了将代码块 4推入 nextTick，打印5，执行完 then 所以将下一个 then 的代码块 5推入 nextTick；然后代码块 7执行，打印6，执行完所以将下一个 then 的代码块 8推入 nextTick；执行代码块 9，打印7 - tick4、代码块 4执行，
打印8；代码块 5执行，打印9，创建新 Promise，resolve 了所以将代码块 6推入 nextTick，打印10；代码块 8执行，打印11 - tick5、代码块 6执行，
打印12
Promise.reject(
new Promise((res, rej) => {
setTimeout(() => {
rej(133222);
res(444);
}, 2000);
})
)
.then(rs => console.log('then', rs))
.catch(rs => console.log('catch', rs))
.then(rs => console.log('then', rs))
.catch(rs => console.log('catch', rs));
这里很容易理解，会立刻执行第二个 catch 和第三个 then，打印 pending 中的 Promise 对象和 undefined，因为 Promise.reject 会创建一个已 rejected 的 Promise 对象，value 为传入的值。
Promise.resolve(
new Promise((res, rej) => {
setTimeout(() => {
rej(133222);
res(444);
}, 2000);
})
)
.then(rs => console.log('then', rs))
.catch(rs => console.log('catch', rs))
.then(rs => console.log('then', rs))
.catch(rs => console.log('catch', rs));
但是这里就不一样了，会等待 2 秒后，但是还是第二个 catch 和第三个 then。因为 Promise.resolve 如果传入的是 thenable 对象，则返回以此为准。
new Promise((res, rej) => {
res(Promise.reject(123));
})
.then(rs => console.log('then', rs))
.catch(rs => console.log('catch', rs));
这里会以为调用 then，因为调用了内部的 resolve 方法，其实不然，这里会走 catch 回调并且打印 catch 和 123，因为 resolve 内如果传入 thenable 对象则会一次为准
new Promise((res, rej) => {
rej(Promise.resolve(123));
})
.then(rs => console.log('then', rs))
.catch(rs => console.log('catch', rs));
而 reject 则不会。
new Promise(res => res(Promise.resolve())).then(() => console.log(2));
Promise.resolve(Promise.resolve()).then(() => console.log(1));
Promise.resolve()
.then(() => {
console.log(1);
return Promise.resolve(5);
})
.then(r => {
console.log(r);
});
Promise.resolve()
.then(() => {
console.log(2);
})
.then(() => {
console.log(3);
})
.then(() => {
console.log(4);
})
.then(() => {
console.log(6);
});
Promise.resolve()
.then(() => {
console.log(1);
return {
then(r) {
r(5);
},
};
})
.then(r => {
console.log(r);
});
Promise.resolve()
.then(() => {
console.log(2);
})
.then(() => {
console.log(3);
})
.then(() => {
console.log(4);
})
.then(() => {
console.log(6);
});
这两个可以一块说，大部分网上的例子都没实现这块的逻辑，也是 Promise 的一个需要注意的细节：就是 resolve、then 传入的回调函数的返回，如果是 Promise 对象，则会延迟两个 tick。
为什么呢，这块当然涉及到 v8 实现的源码，不说这么复杂简单化来说的话就是，Promise 会先把 then 执行一次，这里会有一个 tick（如果是 thenable 对象则不会，因为并非原生的then），执行这个 then 时传入的回调会包含另一个 tick 的延迟。
完整实现
下面贴出全代码实现，包含了
- Promise/A+规范实现
- 所有目前（ES2021）的 Promise 实例方法（finally）、静态方法（any、allSettled）等的实现
- 将异步任务正确推入微任务队列
- then 传入的回调函数返回 Promise 对象，延迟两个 tick
- 构造函数的参数 executor 中 resolve 入参传入为 Promise 对象也会延迟两个 tick
- Promise.resolve 传入 Promise 对象时会直接将其返回出去，Promise.reject 则不然
- Promise 各种静态方法（all、race、any、allsettled）传入的是可迭代对象而非数组
- Promise 各种静态方法（all、race、any、allsettled）传入的可迭代对象成员如果不是 Promise 对象会直接返回，但是也是会进入下一微任务（很多实现都是直接 resolve 并没有延迟）