通过手写 Promise，可以使我们深入理解它的内部工作原理。这有助于更好地理解异步编程、回调、事件循环等概念。
手写一个 Promise 的过程可以分为以下几个关键步骤：
1. 创建 Promise 构造函数
首先，你需要创建一个 Promise 构造函数。这个构造函数接受一个 executor 函数，这个函数有两个参数：resolve 和 reject，它们用于将 Promise 从 pending 状态转换为 fulfilled 或 rejected 状态。
2. 定义 Promise 的状态和值
在构造函数中，你需要定义 Promise 的状态（初始为 pending）和值。状态表示 Promise 的当前状态（pending、fulfilled、rejected），值表示 Promise 的最终结果值（成功时是结果值，失败时是错误原因）。
3. 实现 resolve 和 reject 函数
在构造函数中，你需要实现 resolve 和 reject 函数，它们用于将 Promise 从 pending 转换为 fulfilled 或 rejected 状态。当调用 resolve(value) 时，Promise 状态变为 fulfilled，并将 value 存储为结果值；当调用 reject(reason) 时，Promise 状态变为 rejected，并将 reason 存储为错误原因。
4. 处理异步操作
在 executor 函数中，通常会包含异步操作，例如网络请求、定时器等。你需要确保在异步操作完成后，调用 resolve 或 reject 函数来改变 Promise 的状态。
5. 实现 then 方法
then 方法是 Promise 实例的核心方法，它用于注册成功和失败的回调函数，以便在状态变为 fulfilled 或 rejected 时执行相应的操作。在 then 方法中，你需要考虑以下几点：
- 如果 Promise 的状态已经是 fulfilled，则立即执行成功回调。
- 如果 Promise 的状态已经是 rejected，则立即执行失败回调。
- 如果 Promise 的状态是 pending，则将成功和失败回调分别添加到回调队列中，等待状态改变后执行。
6. 支持链式调用
你需要返回一个新的 Promise 对象，以支持链式调用。这是通过在 then 方法内创建并返回一个新的 Promise 对象来实现的。
7. 处理回调返回值
在 then 方法中，你需要处理成功回调和失败回调的返回值。如果返回值是一个 Promise，需要等待这个 Promise 的状态变化，并根据其状态来决定新 Promise 的状态。如果返回值不是 Promise，直接将其作为新 Promise 的值。
8. 实现 catch 方法
catch 方法是 then 方法的一种简化形式，用于注册失败回调。你可以在 catch 方法内部调用 then(null, onRejected) 来实现。
9. 实现静态方法
你可以为 Promise 添加静态方法，如 Promise.resolve 和 Promise.reject，以便创建已解决或已拒绝的 Promise。另外，你还可以实现 Promise.all 和 Promise.race 等静态方法，用于处理多个 Promise 实例。
10. 错误处理
在所有涉及到异步操作的地方，要确保捕获异常并将其传递给 reject 函数，以便在 Promise 失败时能够正确处理错误。
以下是完整的代码示例：
class MyPromise {
constructor(executor) {
// 初始化 Promise 的状态为 pending
this.state = 'pending';
// 初始化 Promise 的结果值
this.value = undefined;
// 初始化 Promise 的拒因（错误原因）
this.reason = undefined;
// 初始化成功和失败的回调队列
this.onFulfilledCallbacks = [];
this.onRejectedCallbacks = [];
// 定义 resolve 函数，用于将 Promise 状态从 pending 变为 fulfilled
const resolve = (value) => {
if (this.state === 'pending') {
this.state = 'fulfilled';
this.value = value;
// 依次执行成功回调函数
this.onFulfilledCallbacks.forEach(callback => callback(this.value));
}
};
// 定义 reject 函数，用于将 Promise 状态从 pending 变为 rejected
const reject = (reason) => {
if (this.state === 'pending') {
this.state = 'rejected';
this.reason = reason;
// 依次执行失败回调函数
this.onRejectedCallbacks.forEach(callback => callback(this.reason));
}
};
try {
// 执行用户传入的执行器函数，并传入 resolve 和 reject 函数
executor(resolve, reject);
} catch (error) {
// 如果执行器函数抛出异常，将 Promise 状态置为 rejected
reject(error);
}
}
then(onFulfilled, onRejected) {
// 创建一个新的 Promise 对象
return new MyPromise((resolve, reject) => {
// 封装成功时执行的函数
const onFulfilledHandler = (value) => {
try {
// 如果 onFulfilled 不是函数，则将结果传递给下一个 Promise
if (typeof onFulfilled === 'function') {
const result = onFulfilled(value);
this.resolvePromise(result, resolve, reject);
} else {
resolve(value);
}
} catch (error) {
reject(error);
}
};
// 封装失败时执行的函数
const onRejectedHandler = (reason) => {
try {
// 如果 onRejected 不是函数，则将错误传递给下一个 Promise
if (typeof onRejected === 'function') {
const result = onRejected(reason);
this.resolvePromise(result, resolve, reject);
} else {
reject(reason);
}
} catch (error) {
reject(error);
}
};
// 根据当前 Promise 的状态执行不同的处理函数
if (this.state === 'fulfilled') {
// 当前 Promise 已经是 fulfilled 状态，执行成功处理函数
onFulfilledHandler(this.value);
} else if (this.state === 'rejected') {
// 当前 Promise 已经是 rejected 状态，执行失败处理函数
onRejectedHandler(this.reason);
} else if (this.state === 'pending') {
// 当前 Promise 是 pending 状态，将成功和失败处理函数分别添加到回调队列
this.onFulfilledCallbacks.push(onFulfilledHandler);
this.onRejectedCallbacks.push(onRejectedHandler);
}
});
}
catch(onRejected) {
return this.then(null, onRejected);
}
resolvePromise(result, resolve, reject) {
if (result === this) {
return reject(new TypeError('Chaining cycle detected'));
}
let called = false;
if (result instanceof MyPromise) {
// 如果返回值是一个 Promise，则等待其状态变化
result.then(
value => {
if (called) return;
called = true;
this.resolvePromise(value, resolve, reject);
},
reason => {
if (called) return;
called = true;
reject(reason);
}
);
} else {
// 如果返回值不是 Promise，则直接将其作为新 Promise 的结果值
resolve(result);
}
}
static resolve(value) {
if (value instanceof MyPromise) return value;
return new MyPromise(resolve => resolve(value));
}
static reject(reason) {
return new MyPromise((resolve, reject) => reject(reason));
}
static all(promises) {
return new MyPromise((resolve, reject) => {
const results = [];
let completed = 0;
if (promises.length === 0) {
resolve(results);
} else {
promises.forEach((promise, index) => {
MyPromise.resolve(promise).then(result => {
results[index] = result;
completed++;
if (completed === promises.length) {
resolve(results);
}
}).catch(reject);
});
}
});
}
static race(promises) {
return new MyPromise((resolve, reject) => {
promises.forEach(promise => {
MyPromise.resolve(promise).then(resolve).catch(reject);
});
});
}
}
示例代码
// 示例用法
const promise = new MyPromise((resolve, reject) => {
// 异步操作
setTimeout(() => {
resolve('Promise resolved');
// 或者
//reject('Promise rejected');
}, 500);
});
promise
.then(value => {
console.log(value);
return 'New value';
})
.then(value => {
console.log(value);
})
.catch(reason => {
console.error(reason);
});
网友评论