Promise的优雅简易实现，仅15行代码轻松解决异步嵌套问题

前端

2023-09-03 11:04:01

掌握Promise：简化异步JavaScript编程

在JavaScript中，异步编程是编写响应式和高效代码的关键。Promise对象引入了一种更简单、更易读的方式来处理异步操作。本文将深入探讨Promise，从一个简单的实现开始，并通过使用示例说明其使用方法。

什么是Promise？

想象一下，你正在烹饪晚餐。你需要一些食材，于是你去商店买。你将购买过程视为一个异步操作，你将继续做其他事情，直到食材准备好。

Promise就像一位勤劳的助手，它会帮你购买食材并通知你何时完成。你可以在完成任务之前继续做其他事情，而Promise会跟踪任务的状态并通知你结果。

简易Promise实现

为了更深入地了解Promise的工作原理，让我们创建一个简单的实现：

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

    const resolve = (result) => {
      if (this.state !== "pending") return;
      this.state = "fulfilled";
      this.result = result;
      this.onResolveCallbacks.forEach((callback) => callback(result));
    };

    const reject = (error) => {
      if (this.state !== "pending") return;
      this.state = "rejected";
      this.result = error;
      this.onRejectCallbacks.forEach((callback) => callback(error));
    };

    executor(resolve, reject);
  }

  then(onResolve, onReject) {
    return new Promise((resolve, reject) => {
      if (this.state === "fulfilled") {
        setTimeout(() => {
          try {
            const result = onResolve(this.result);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else if (this.state === "rejected") {
        setTimeout(() => {
          try {
            const error = onReject(this.result);
            reject(error);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else {
        this.onResolveCallbacks.push(() => {
          setTimeout(() => {
            try {
              const result = onResolve(this.result);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
        this.onRejectCallbacks.push(() => {
          setTimeout(() => {
            try {
              const error = onReject(this.result);
              reject(error);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
      }
    });
  }

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

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

Promise用法

要使用Promise，请创建一个新的Promise对象并传递一个执行器函数作为参数。执行器函数接受两个回调函数，resolve和reject：

resolve()： 当操作成功时调用，将结果传递给下一个链式调用的onResolve函数。
reject()： 当操作失败时调用，将错误传递给下一个链式调用的onReject函数。

要处理Promise的结果，请使用.then()方法。它接受两个可选的回调函数：

onResolve()： 当Promise成功解决时调用，接受结果参数。
onReject()： 当Promise失败时调用，接受错误参数。

使用示例

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

promise
  .then((result) => {
    console.log(result); // 输出: "成功！"
  })
  .catch((error) => {
    console.log(error);
  });