一，前言
上一篇，翻译并理解了整个 Promise A+ 规范；
本篇开始，将基于 Promise A+ 规范，对我们的简版 Promise 源码进行功能完善；
本篇，将实现 Promise 对异步操作的支持；
二，前文回顾
在前面几篇中，结合对 Promise 基础功能的使用介绍和简单分析，手写了一个简版 Promise 源码，主要覆盖了以下几点：
- promise 是一个类；
- 使用 promise 时，传入 executor 执行器，并被立即执行；
- executor 参数是两个函数，用于描述 promise 实例的状态；
- resolve 表示成功，可以传入一个 value；
- reject 表示失败，可以传入一个 reason;
- 每个 Promise 实例都有一个 then 方法；
- promise 一旦状态发生后，不能再更改;
- promise 有三种状态：成功态，失败态，等待态(默认);
简版源码如下：
const PENDING = 'PENDING'; // 等待态
const DULFILLED = 'DULFILLED'; // 成功态
const REJECTED = 'REJECTED'; // 失败态
class Promise{
// 通过 new Promise 进行实例化时，传入 executor 执行器函数
constructor(executor){
this.value = undefined; // 保存成功的原因,then中调用onFulfilled时传入
this.reason = undefined; // 保存失败的原因,then中调用onFulfilled时传入
this.state = PENDING; // promise 状态，默认等待态
// 成功 reslove 函数、失败reject函数，并传入executor
const reslove = (value) =>{
// 等待态 --> 成功态
if(this.state === PENDING){
this.value = value
this.state = DULFILLED;
}
}
const reject = (reason) =>{
// 等待态 --> 失败态
if(this.state === PENDING){
this.reason = reason
this.state = REJECTED;
}
}
// 立即执行 executor 执行器函数，通过 try...catch... 进行异常捕捉；
try{
executor(reslove, reject);
}catch(e){
reject(e) // 有异常，调用 reject 更新为失败态
}
}
// 定义 then 方法：包含两个参数 onFulfilled 和 onRejected；
// 根据 Promise 状态，执行 onFulfilled 或 onRejected；
then(onFulfilled, onRejected){
// 成功态，调用 onFulfilled，传入成功 value
if(this.state === DULFILLED){
onFulfilled(this.value)
}
// 失败态，执行 onRejected，传入失败 reason
if(this.state === REJECTED){
onRejected(this.reason)
}
}
}
module.exports = Promise;
三，提出问题
前面说，Promise 的一个主要作用就是处理异步操作，使开发者使用同步编程方式处理异步操作，相比之前 callback 回调的处理方式，能够更好的解决/避免回调地狱的产生，同时还能实现控制权的反转；
1，测试原生 Promise
使用原生 Promise 执行异步操作：
let promise = new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve('ok');
}, 1000)
})
promise.then((value)=>{
console.log('success', value)
},(reson)=>{
console.log('err',reson)
})
// success ok
2，测试手写 Promise
// 引入手写的 promise.js
let promise = new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve('ok');
}, 1000)
})
promise.then((value)=>{
console.log('success', value)
},(reson)=>{
console.log('err',reson)
})
执行结果将不会输出任何内容，即 then 中的成功回调 onFulfilled 和失败回调 onRejected 都没有被执行；
3，问题分析
执行过程分析:
- 当 new Promise 完成后，executor 执行器函数被立即执行，定时器被启动；
- promise.then 被执行，当前 promise 实例状态为 pending 态，不执行任何操作；
- 1 秒后定义器回调执行，调用 resolve，将当前 promise 实例状态更新为成功态；
问题原因：
- 定时器 1 秒后才会调用 reslove 函数，而此时 then 方法已经执行完毕；
- 所以，当前 promise 源码尚不支持异步操作，需要实现对异步操作的支持；
4，解决方案
- 使用队列先将 then 方法中的回调函数收集起来；
- 待 resolve 或 reject 被调用状态更新后，再执行对应的回调函数即可；
这种“先收集，再执行”的功能特征，符合订阅发布模式；
四，实现 Promise 对异步操作的支持
1，事件订阅：收集回调函数
- 当 Promise 执行异步操作时，状态为 PENDING；
- 此时，需要两个队列（数组）对成功/失败回调分别进行收集；
class Promise{
constructor(executor){
this.state = PENDING;
this.value = undefined;
this.reason = undefined;
this.onResolvedCallbacks = []; // 收集成功回调
this.onRejectedCallbacks = []; // 收集失败回调
// ...
}
then(onFulfilled, onRejected){
// 执行异步操作时，收集成功/失败回调
if(this.state === PENDING){
this.onResolvedCallbacks.push(()=>{
onFulfilled(this.value) // 传入 value
})
this.onRejectedCallbacks.push(()=>{
onRejected(this.value) // 传入 value
})
}
// ...
}
}
这样，就完成了成功/失败回调函数的事件订阅操作；
2，事件发布：根据状态执行回调处理
当 Promise 中的 resolve 或 reject 函数被调用时，根据状态执行对应的回调处理：
class Promise{
constructor(executor){
this.state = PENDING;
this.value = undefined;
this.reason = undefined;
this.onResolvedCallbacks = [];
this.onRejectedCallbacks = [];
const reslove = (value) =>{
if(this.state === PENDING){
this.value = value
this.state = DULFILLED;
// 事件发布操作
this.onResolvedCallbacks.forEach(fn=>fn())
}
}
const reject = (reason) =>{
if(this.state === PENDING){
this.reason = reason
this.state = REJECTED;
// 事件发布操作
this.onRejectedCallbacks.forEach(fn=>fn())
}
}
// ...
}
// ...
}
这里相当于“订阅发布模式”中的事件发布；
3，测试对异步操作的支持
let promise = new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve('ok');
}, 1000)
})
promise.then((value)=>{
console.log('success', value)
},(reson)=>{
console.log('err',reson)
})
// success ok
五，结尾
本篇，主要实现了 Promise 对异步操作的支持，主要涉及以下几个点：
- 测试 Promise 对异步操作的支持；
- 分析当前 Promise 代码问题及解决方案；
- 使用发布订阅思想实现对异步操作的支持；
- Promise 异步操作的测试；
下一篇，实现 Promise 的链式调用；
