"这篇文章主要讲解如何在JavaScript中实现一个简单的Promise，遵循Promise/A+规范，通过实例代码解析Promise的核心功能，包括构造函数、resolve、reject、then和catch方法的实现。"
在JavaScript中，Promise是一种处理异步操作的机制，它帮助开发者避免了回调地狱，使得异步代码更加清晰和易于管理。Promise有三种状态：pending（等待中）、fulfilled（已完成）和rejected（已拒绝）。状态一旦确定就不可更改，保证了结果的稳定性。
在实现一个简单的Promise时，我们需要创建一个类，通常命名为`MyPromise`，并定义其构造函数。构造函数接收一个执行器函数作为参数，这个执行器函数接受两个参数，分别是`resolve`和`reject`，它们分别用于将Promise状态从pending变为fulfilled或rejected。
```javascript
class MyPromise {
constructor(fn) {
// 初始化Promise状态
this.status = 'pending';
this.value = undefined;
this.reason = undefined;
// 创建成功的回调队列
this.successQueue = [];
// 创建失败的回调队列
this.failureQueue = [];
try {
fn(this.resolve.bind(this), this.reject.bind(this));
} catch (e) {
this.reject(e);
}
}
resolve(value) {
if (this.status !== 'pending') return;
this.status = 'fulfilled';
this.value = value;
this.successQueue.forEach(callback => callback(value));
}
reject(reason) {
if (this.status !== 'pending') return;
this.status = 'rejected';
this.reason = reason;
this.failureQueue.forEach(callback => callback(reason));
}
then(onFulfilled, onRejected) {
// 检查是否是Promise，如果不是，则包装成Promise
onFulfilled = wrapPromise(onFulfilled);
onRejected = wrapPromise(onRejected);
return new MyPromise((resolve, reject) => {
if (this.status === 'fulfilled') {
setTimeout(() => onFulfilled(this.value, resolve, reject), 0);
} else if (this.status === 'rejected') {
setTimeout(() => onRejected(this.reason, resolve, reject), 0);
} else {
this.successQueue.push((value) => onFulfilled(value, resolve, reject));
this.failureQueue.push((reason) => onRejected(reason, resolve, reject));
}
});
}
catch(onRejected) {
return this.then(null, onRejected);
}
}
// 将非Promise函数包装成返回Promise的函数
function wrapPromise(fn) {
if (typeof fn !== 'function') return (val, resolve, reject) => resolve(val);
return val => {
try {
const result = fn(val);
if (result instanceof MyPromise) return result;
return new MyPromise(resolve => resolve(result));
} catch (e) {
return new MyPromise(reject => reject(e));
}
};
}
```
上述代码实现了一个基本的Promise，包括构造函数、resolve、reject、then和catch方法。构造函数中，我们初始化Promise的状态，并通过执行器函数来决定Promise的状态变化。`then`方法实现了链式调用，当Promise状态改变时，会触发对应的回调。`catch`方法用于处理错误，它是`then`方法的别名，只接受一个onRejected参数。
值得注意的是，`then`方法中的回调函数会被包装成返回Promise的函数，这是为了保证即使回调函数返回的不是一个Promise，我们也可以将其转换为Promise，以支持Promise的链式调用。这种处理方式遵循了Promise/A+规范，确保了异步操作的正确流转。
通过这个简单的实现，我们可以更好地理解Promise的工作原理，以及它如何协调异步操作。在实际开发中，虽然我们通常会使用浏览器内置的Promise或第三方库如Bluebird，但理解其内部机制有助于我们编写更健壮和高效的异步代码。
我的内容管理
展开
