完整实现Promises/A+规范
从零开始手写一个完全符合Promises/A+规范的Promise实现,理解Promise的原理和异步编程机制
问题
Promise是JavaScript中处理异步操作的重要机制。本题要求完整实现符合Promises/A+规范的Promise,包括:
- Promise的三种状态管理(pending、fulfilled、rejected)
- then方法的链式调用
- 值穿透和错误传递
- 异步执行和微任务队列
- Promise解决过程(Promise Resolution Procedure)
解答
// Promise的三种状态
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
class MyPromise {
constructor(executor) {
this.state = PENDING; // 当前状态
this.value = undefined; // 成功的值
this.reason = undefined; // 失败的原因
this.onFulfilledCallbacks = []; // 成功回调队列
this.onRejectedCallbacks = []; // 失败回调队列
// resolve函数
const resolve = (value) => {
// 只有pending状态才能转换
if (this.state === PENDING) {
this.state = FULFILLED;
this.value = value;
// 执行所有成功回调
this.onFulfilledCallbacks.forEach(fn => fn());
}
};
// reject函数
const reject = (reason) => {
// 只有pending状态才能转换
if (this.state === PENDING) {
this.state = REJECTED;
this.reason = reason;
// 执行所有失败回调
this.onRejectedCallbacks.forEach(fn => fn());
}
};
// 执行executor,捕获异常
try {
executor(resolve, reject);
} catch (error) {
reject(error);
}
}
// then方法
then(onFulfilled, onRejected) {
// 参数校验,确保是函数(实现值穿透)
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason };
// 返回新的Promise实现链式调用
const promise2 = new MyPromise((resolve, reject) => {
// 封装fulfilled状态的处理逻辑
const fulfilledMicrotask = () => {
// 使用queueMicrotask模拟微任务
queueMicrotask(() => {
try {
const x = onFulfilled(this.value);
// Promise解决过程
resolvePromise(promise2, x, resolve, reject);
} catch (error) {
reject(error);
}
});
};
// 封装rejected状态的处理逻辑
const rejectedMicrotask = () => {
queueMicrotask(() => {
try {
const x = onRejected(this.reason);
resolvePromise(promise2, x, resolve, reject);
} catch (error) {
reject(error);
}
});
};
// 根 目录