手写 Promise — 回调函数的优雅替代方案

前端

2023-10-10 14:03:30

前言

在现代 Web 开发中，异步编程无处不在。然而，传统的回调函数方法往往会导致难以管理的代码库，特别是当多个回调函数同时注册时。这时，手写 Promise 就可以大显身手了。

Promise 的优势

与回调函数相比，Promise 具有以下优势：

模块化： Promise 可以独立于主代码块运行，使其更易理解和维护。
可读性： Promise 提供了清晰且易于理解的语法，使代码更容易阅读和理解。
可维护性： Promise 允许轻松处理错误并管理异步流程，从而提高代码的可维护性。
避免回调地狱： Promise 嵌套回调函数的“回调地狱”问题，使其更易管理和可视化。

手写 Promise

以下是一个手写 Promise 的简单示例：

class Promise {
  constructor(executor) {
    this.state = "pending";
    this.result = undefined;

    const resolver = (value) => {
      if (this.state !== "pending") return;
      this.state = "fulfilled";
      this.result = value;
      if (this.onFulfilled) this.onFulfilled(value);
    };

    const rejector = (error) => {
      if (this.state !== "pending") return;
      this.state = "rejected";
      this.result = error;
      if (this.onRejected) this.onRejected(error);
    };

    executor(resolver, rejector);
  }

  then(onFulfilled, onRejected) {
    if (this.state === "fulfilled") {
      if (typeof onFulfilled === "function") {
        onFulfilled(this.result);
      }
    } else if (this.state === "rejected") {
      if (typeof onRejected === "function") {
        onRejected(this.result);
      }
    } else {
      if (typeof onFulfilled === "function") {
        this.onFulfilled = onFulfilled;
      }
      if (typeof onRejected === "function") {
        this.onRejected = onRejected;
      }
    }
  }
}

完整代码示例

要使用手写 Promise，可以按照以下步骤操作：

创建一个 Promise 实例。
为 Promise 注册 then 处理程序，以在 Promise 完成时处理结果。
使用 resolve 和 reject 函数来通知 Promise 完成并传递结果。

以下是一个完整的代码示例，演示如何使用手写 Promise：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("成功！");
  }, 2000);
});

promise.then(
  (result) => {
    console.log(`结果：${result}`);
  },
  (error) => {
    console.log(`错误：${error}`);
  }
);