手写 Promise：深入理解异步编程的基石

在这里插入图片描述

手写 Promise：深入理解异步编程的基石

本文将带您逐步实现一个简单的 Promise，以帮助您深入理解异步编程的基本概念。通过自己动手编写 Promise 的过程，您将更好地理解 Promise 的工作原理和常见用法，并能够应用于实际项目中。

Promise 的基本结构

Promise 是一个构造函数，它接受一个执行器函数作为参数。在执行器函数中，我们可以进行异步操作，并根据操作的结果来调用 Promise 的 resolve 和 reject 方法。

class MyPromise {constructor(executor) {this.state = 'pending';this.value = undefined;this.callbacks = [];const resolve = (value) => {if (this.state === 'pending') {this.state = 'fulfilled';this.value = value;this.callbacks.forEach(callback => this.executeCallback(callback));}};const reject = (reason) => {if (this.state === 'pending') {this.state = 'rejected';this.value = reason;this.callbacks.forEach(callback => this.executeCallback(callback));}};executor(resolve, reject);}executeCallback(callback) {const { onFulfilled, onRejected, resolve, reject } = callback;try {if (this.state === 'fulfilled') {const value = onFulfilled ? onFulfilled(this.value) : this.value;resolve(value);} else if (this.state === 'rejected') {const value = onRejected ? onRejected(this.value) : this.value;reject(value);}} catch (error) {reject(error);}}
}

添加 then 方法

Promise 的 then 方法用于指定完成和失败时的回调函数。在我们手动实现的 Promise 中，我们将回调函数包装成一个对象，保存在 Promise 的 callbacks 数组中。

class MyPromise {// ...then(onFulfilled, onRejected) {return new MyPromise((resolve, reject) => {const callback = {onFulfilled,onRejected,resolve,reject,};if (this.state === 'pending') {this.callbacks.push(callback);} else {this.executeCallback(callback);}});}
}

错误处理和链式调用

为了实现错误处理和链式调用，我们需要在 then 方法中返回一个新的 Promise 对象，以便将每个 then 方法的返回值传递给下一个 then 方法。

class MyPromise {// ...then(onFulfilled, onRejected) {return new MyPromise((resolve, reject) => {const callback = {onFulfilled,onRejected,resolve,reject,};if (this.state === 'pending') {this.callbacks.push(callback);} else {setTimeout(() => {this.executeCallback(callback);});}});}catch(onRejected) {return this.then(null, onRejected);}
}

完成最终的 Promise 实现

最终，我们的手写 Promise 实现如下：

class MyPromise {constructor(executor) {// ...executor(resolve, reject);}// ...then(onFulfilled, onRejected) {return new MyPromise((resolve, reject) => {const callback = {onFulfilled,onRejected,resolve,reject,};if (this.state === 'pending') {this.callbacks.push(callback);} else {setTimeout(() => {this.executeCallback(callback);});}});}catch(onRejected) {return this.then(null, onRejected);}
}