请手写实现一个promise

实现一个 `Promise` 对象的核心在于理解其状态管理、异步流程控制以及 `then` 和 `catch` 的链式调用机制。以下是一个简化版的手动实现，涵盖了 `Promise` 的基本功能：状态管理、`then` 方法、静态方法 `resolve`、`reject`、`all` 和 `race`。 ### 3.1 基本结构与状态管理 ```javascript const PENDING = 'pending'; const FULFILLED = 'fulfilled'; const REJECTED = 'rejected'; class MyPromise { constructor(executor) { this.status = PENDING; this.value = undefined; this.reason = undefined; this.onFulfilledCallbacks = []; this.onRejectedCallbacks = []; const resolve = (value) => { if (this.status === PENDING) { this.status = FULFILLED; this.value = value; this.onFulfilledCallbacks.forEach(fn => fn()); } }; const reject = (reason) => { if (this.status === PENDING) { this.status = REJECTED; this.reason = reason; this.onRejectedCallbacks.forEach(fn => fn()); } }; try { executor(resolve, reject); } catch (error) { reject(error); } } then(onFulfilled, onRejected) { return new MyPromise((resolve, reject) => { if (this.status === FULFILLED) { setTimeout(() => { try { const result = onFulfilled(this.value); resolve(result); } catch (error) { reject(error); } }, 0); } if (this.status === REJECTED) { setTimeout(() => { try { const result = onRejected(this.reason); resolve(result); } catch (error) { reject(error); } }, 0); } if (this.status === PENDING) { this.onFulfilledCallbacks.push(() => { setTimeout(() => { try { const result = onFulfilled(this.value); resolve(result); } catch (error) { reject(error); } }, 0); }); this.onRejectedCallbacks.push(() => { setTimeout(() => { try { const result = onRejected(this.reason); resolve(result); } catch (error) { reject(error); } }, 0); }); } }); } catch(onRejected) { return this.then(null, onRejected); } static resolve(value) { return new MyPromise((resolve) => resolve(value)); } static reject(reason) { return new MyPromise((_, reject) => reject(reason)); } static all(promises) { return new MyPromise((resolve, reject) => { let results = []; let completed = 0; promises.forEach((promise, index) => { promise.then( (value) => { results[index] = value; completed++; if (completed === promises.length) { resolve(results); } }, (error) => { reject(error); } ); }); }); } static race(promises) { return new MyPromise((resolve, reject) => { promises.forEach(promise => { promise.then(resolve, reject); }); }); } } ``` ### 3.2 使用示例 ```javascript const p = new MyPromise((resolve, reject) => { setTimeout(() => { resolve('Success!'); }, 1000); }); p.then(value => { console.log(value); // 输出: Success! }).catch(error => { console.error(error); }); ``` ### 3.3 静态方法使用示例 ```javascript // Promise.resolve MyPromise.resolve('Resolved').then(value => { console.log(value); // 输出: Resolved }); // Promise.reject MyPromise.reject('Rejected').catch(reason => { console.log(reason); // 输出: Rejected }); // Promise.all const p1 = MyPromise.resolve(3); const p2 = new MyPromise((resolve, reject) => { setTimeout(resolve, 100, 'foo'); }); const p3 = MyPromise.resolve(4); MyPromise.all([p1, p2, p3]).then(values => { console.log(values); // 输出: [3, 'foo', 4] }).catch(error => { console.error(error); }); // Promise.race const p4 = new MyPromise((resolve, reject) => { setTimeout(resolve, 500, 'one'); }); const p5 = new MyPromise((resolve, reject) => { setTimeout(resolve, 100, 'two'); }); MyPromise.race([p4, p5]).then(value => { console.log(value); // 输出: two }); ``` ### 3.4 实现要点说明 - **状态管理**：`Promise` 只能从 `pending` 状态变为 `fulfilled` 或 `rejected`，且一旦状态改变，就不能再变。 - **异步处理**：通过 `setTimeout` 模拟微任务队列，确保回调在当前执行栈清空后执行。 - **链式调用**：`then` 返回一个新的 `Promise`，允许链式调用，并传递前一个 `Promise` 的结果。 - **错误捕获**：通过 `catch` 方法捕获链中的任何错误，并终止后续的 `then` 执行[^3]。