彻底弄懂Promise，手把手带你写出来

前端

2023-10-26 21:12:50

Promise：异步编程的福音

什么是Promise？

JavaScript中的Promise是一种对象，用于表示异步操作的最终结果（成功或失败）及其返回的值。它提供了一种简单有效的方式来处理异步编程，使代码更加易懂和易于维护。

Promise有三种状态：

等待（pending）： 初始状态，既没有成功，也没有失败。
成功（fulfilled）： 表示操作成功完成。
失败（rejected）： 表示操作失败。

如何使用Promise？

使用Promise非常简单。首先，创建一个Promise对象：

const promise = new Promise((resolve, reject) => {
  // 异步操作
});

resolve()和reject()是两个函数，用于将Promise的状态分别设置为成功或失败：

promise.then((result) => {
  // 操作成功后的处理逻辑
}, (error) => {
  // 操作失败后的处理逻辑
});

then()方法用于添加回调函数，当Promise的状态改变时，这些回调函数就会被调用。

自定义Promise

现在，让我们深入了解如何自定义Promise：

class Promise {
  constructor(executor) {
    this.state = 'pending';
    this.result = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = (result) => {
      if (this.state !== 'pending') return;

      this.state = 'fulfilled';
      this.result = result;
      this.onFulfilledCallbacks.forEach((callback) => callback(result));
    };

    const reject = (error) => {
      if (this.state !== 'pending') return;

      this.state = 'rejected';
      this.result = error;
      this.onRejectedCallbacks.forEach((callback) => callback(error));
    };

    executor(resolve, reject);
  }

  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        setTimeout(() => {
          try {
            const result = onFulfilled(this.result);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            const result = onRejected(this.result);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else {
        this.onFulfilledCallbacks.push(() => {
          setTimeout(() => {
            try {
              const result = onFulfilled(this.result);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });

        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              const result = onRejected(this.result);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
      }
    });
  }

  catch(onRejected) {
    return this.then(undefined, onRejected);
  }

  finally(onFinally) {
    return this.then(
      (result) => {
        onFinally();
        return result;
      },
      (error) => {
        onFinally();
        throw error;
      }
    );
  }
}