【手写 Promise 源码】第五篇 - 实现 Promise 对异步操作的支持

一，前言

上一篇，翻译并理解了整个 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函数，并传入executorconst reslove = (value) =>{// 等待态 --> 成功态if(this.state === PENDING){this.value = valuethis.state = DULFILLED;}}const reject = (reason) =>{// 等待态 --> 失败态if(this.state === PENDING){this.reason = reasonthis.state = REJECTED;}}// 立即执行 executor 执行器函数，通过 try...catch... 进行异常捕捉；try{executor(reslove, reject);}catch(e){reject(e)  // 有异常，调用 reject 更新为失败态}}// 定义 then 方法：包含两个参数 onFulfilled 和 onRejected；// 根据 Promise 状态，执行 onFulfilled 或 onRejected；then(onFulfilled, onRejected){// 成功态，调用 onFulfilled，传入成功 valueif(this.state === DULFILLED){onFulfilled(this.value)} // 失败态，执行 onRejected，传入失败 reasonif(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 = valuethis.state = DULFILLED;// 事件发布操作this.onResolvedCallbacks.forEach(fn=>fn())}}const reject = (reason) =>{if(this.state === PENDING){this.reason = reasonthis.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