在JavaScript的世界里，Promise是异步编程的一种解决方案，它提供了更好的错误处理机制和更优雅的代码组织方式。这篇教程将深入探讨如何手动实现一个基本的Promise，以理解其内部工作原理。
我们需要明白Promise有三种状态：pending（等待中）、fulfilled（已完成）和rejected（已拒绝）。Promise的状态一旦改变，就永远不会再次改变。状态的改变通常由执行异步操作的结果驱动，例如网络请求或文件读取。
手动创建Promise，我们需要定义一个构造函数，接受一个执行器（executor）函数作为参数。执行器函数会立即执行，并接收两个参数——resolve和reject，它们分别是改变Promise状态的函数。
```javascript
function MyPromise(executor) {
this.status = 'pending'; // 初始状态为pending
this.value = null; // 成功时的值
this.reason = null; // 失败时的原因
// 定义解决（成功）函数
const resolve = value => {
if (this.status === 'pending') {
this.status = 'fulfilled';
this.value = value;
this.onFulfilledCallbacks.forEach(fn => fn(value));
}
};
// 定义拒绝（失败）函数
const reject = reason => {
if (this.status === 'pending') {
this.status = 'rejected';
this.reason = reason;
this.onRejectedCallbacks.forEach(fn => fn(reason));
}
};
// 存储成功的回调函数
this.onFulfilledCallbacks = [];
// 存储失败的回调函数
this.onRejectedCallbacks = [];
// 在构造函数内部执行executor
try {
executor(resolve, reject);
} catch (error) {
reject(error);
}
}
```
接下来，我们需要在`MyPromise`实例上添加`then`方法，用于处理Promise的fulfilled状态，以及可选的`catch`方法，用于处理rejected状态。
```javascript
MyPromise.prototype.then = function(onFulfilled, onRejected) {
const promise2 = new MyPromise((resolve, reject) => {
if (this.status === 'fulfilled') {
try {
let x = onFulfilled(this.value);
if (x instanceof MyPromise) {
x.then(resolve, reject);
} else {
resolve(x);
}
} catch (error) {
reject(error);
}
} else if (this.status === 'rejected') {
try {
let x = onRejected(this.reason);
if (x instanceof MyPromise) {
x.then(resolve, reject);
} else if (x !== undefined) {
resolve(x);
} else {
reject(this.reason);
}
} catch (error) {
reject(error);
}
} else {
// 如果Promise还未决定状态，将回调函数存储起来
this.onFulfilledCallbacks.push(() => {
try {
let x = onFulfilled(this.value);
if (x instanceof MyPromise) {
x.then(resolve, reject);
} else {
resolve(x);
}
} catch (error) {
reject(error);
}
});
this.onRejectedCallbacks.push(() => {
try {
let x = onRejected(this.reason);
if (x instanceof MyPromise) {
x.then(resolve, reject);
} else if (x !== undefined) {
resolve(x);
} else {
reject(this.reason);
}
} catch (error) {
reject(error);
}
});
}
});
return promise2;
};
MyPromise.prototype.catch = function(onRejected) {
return this.then(null, onRejected);
};
```
现在，我们已经创建了一个简单的Promise实现。你可以使用它来处理异步操作，例如：
```javascript
const myPromise = new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve('Promise fulfilled!');
}, 2000);
});
myPromise.then((result) => {
console.log(result);
}).catch((error) => {
console.error(error);
});
```
这个例子中，`myPromise`会在两秒后变为fulfilled状态，并打印出结果。如果在执行过程中出现错误，`catch`会捕获并打印错误。
以上就是手动实现Promise的基本过程。虽然这只是一个简化的版本，但它揭示了Promise的核心机制：状态管理、回调注册和链式调用。在实际开发中，Promise还有其他高级特性，如Promise.all()和Promise.race()，但这个基础实现足以帮助我们理解Promise的工作原理。通过阅读和理解这段代码，你将对JavaScript中的异步编程有更深的认识。
