Promise简介：从入门到手写

前端

2023-09-02 04:24:14

引言

在现代网络开发中，处理异步操作至关重要。Promise是一种在JavaScript中实现异步编程的有力工具。它允许您对异步操作进行建模并以同步的方式处理它们，从而使代码更易于阅读和维护。

理解Promise

Promise本质上是一种表示异步操作最终结果的对象。它可以处于三种状态之一：

Pending： 初始状态，表示操作尚未完成。
Fulfilled： 操作已成功完成，并带有结果值。
Rejected： 操作失败，带有错误消息。

创建Promise

要创建Promise，请使用以下语法：

const myPromise = new Promise((resolve, reject) => {
  // 异步操作代码
  if (success) {
    resolve(result);
  } else {
    reject(error);
  }
});

其中：

resolve：用于将Promise标记为已完成并带有结果值。
reject：用于将Promise标记为已失败并带有错误消息。

使用Promise

您可以使用以下方法与Promise交互：

then()： 在Promise被fulfilled或rejected时附加回调函数。
catch()： 在Promise被rejected时附加错误处理回调。

示例：

myPromise
  .then((result) => {
    // 操作成功处理
  })
  .catch((error) => {
    // 错误处理
  });

手写Promise实现

为了更深入地了解Promise的工作原理，让我们编写自己的Promise实现：

class MyPromise {
  constructor(executor) {
    this.state = "pending";
    this.value = undefined;
    this.error = undefined;
    this.thenCallbacks = [];
    this.catchCallbacks = [];

    executor(this.resolve.bind(this), this.reject.bind(this));
  }

  resolve(value) {
    if (this.state !== "pending") {
      return;
    }

    this.state = "fulfilled";
    this.value = value;

    this.thenCallbacks.forEach((callback) => callback(value));
  }

  reject(error) {
    if (this.state !== "pending") {
      return;
    }

    this.state = "rejected";
    this.error = error;

    this.catchCallbacks.forEach((callback) => callback(error));
  }

  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      if (this.state === "fulfilled") {
        setTimeout(() => {
          resolve(onFulfilled(this.value));
        }, 0);
      } else if (this.state === "rejected") {
        setTimeout(() => {
          reject(onRejected(this.error));
        }, 0);
      } else {
        this.thenCallbacks.push(() => {
          setTimeout(() => {
            resolve(onFulfilled(this.value));
          }, 0);
        });
        this.catchCallbacks.push(() => {
          setTimeout(() => {
            reject(onRejected(this.error));
          }, 0);
        });
      }
    });
  }

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