谈谈如何使用Promise以及如何实现一个Promise

2023-09-22 18:35:13

掌握Promise：JavaScript异步编程的基石

引言

在当今快节奏的数字世界中，异步编程已成为构建响应式和高效Web应用程序的必备技能。而Promise，作为JavaScript中处理异步操作的利器，在其中扮演着至关重要的角色。本文将深入探索Promise，指导您如何使用和实现它们，为您的JavaScript编程之旅增添新的维度。

什么是Promise？

Promise，简单来说，是一种表示异步操作最终结果的对象。它代表了某项任务的未来结果，而无需阻塞主线程的执行。当您创建一个Promise时，它会处于三种状态之一：

待定 (pending) ：最初的状态，表示操作尚未完成。
已完成 (fulfilled) ：操作成功完成，并带有预期的结果。
已拒绝 (rejected) ：操作未能完成，并带有错误或拒绝原因。

使用Promise

使用Promise非常简单。只需遵循以下步骤：

创建Promise： 使用 new Promise() 构造函数创建Promise对象。
定义执行器函数： 向构造函数传递一个执行器函数，它将接收两个回调函数：resolve 和 reject。
解决或拒绝Promise： 在执行器函数中，根据操作的结果调用 resolve 或 reject。
添加回调： 使用 then() 方法为Promise添加回调函数。如果Promise已完成，将调用第一个回调函数。如果Promise被拒绝，将调用第二个回调函数。

示例代码：

const promise = new Promise((resolve, reject) => {
  // 模拟异步操作
  setTimeout(() => {
    if (/* 操作成功 */) {
      resolve("操作成功！");
    } else {
      reject("操作失败！");
    }
  }, 1000);
});

promise.then(
  (result) => {
    console.log(result); // "操作成功！"
  },
  (error) => {
    console.log(error); // "操作失败！"
  }
);

实现Promise

如果您想深入了解Promise的工作原理，您还可以实现自己的Promise类。这是步骤：

创建Promise类： 定义一个类，构造函数接收一个执行器函数。
定义状态和回调： 在类中，定义 state、value、reason 属性，以及 onFulfilledCallbacks 和 onRejectedCallbacks 数组。
实现resolve和reject方法： 实现两个方法来更新Promise状态和执行回调。
实现then和catch方法： 添加回调函数并返回一个新的Promise。

示例实现：

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

    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onFulfilledCallbacks.forEach((callback) => callback(this.value));
      }
    };

    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach((callback) => callback(this.reason));
      }
    };

    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        onFulfilled(this.value);
      } else if (this.state === 'rejected') {
        onRejected(this.reason);
      } else {
        this.onFulfilledCallbacks.push(() => onFulfilled(this.value));
        this.onRejectedCallbacks.push(() => onRejected(this.reason));
      }
    });
  }

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