用独辟蹊径的手写Promise，踏上异步编程的王者之路

2023-09-13 09:23:23

手把手教你手写Promise，征服异步编程世界

前言

异步编程是JavaScript中一个重要的概念，它允许我们处理并行执行的任务，从而提高代码执行效率。Promise是一个强大的工具，可以简化异步编程，让我们的代码更加清晰、易于维护。在本篇文章中，我们将通过动手实现一个简单的Promise来深入理解其工作原理，并探索如何在实际开发中使用它。

Promise入门

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

Pending（等待）： 初始状态，表示异步操作尚未完成。
Resolved（已完成）： 异步操作成功完成，并带有操作结果。
Rejected（已失败）： 异步操作失败，并带有错误信息。

手写Promise

为了深入理解Promise的工作原理，让我们亲自动手实现一个吧！以下是步骤：

class Promise {
  constructor(executor) {
    this.state = 'pending'; // 初始状态
    this.result = null; // 结果
    this.onResolveCallbacks = []; // 存储成功回调函数
    this.onRejectCallbacks = []; // 存储失败回调函数

    // 执行executor函数，它接收resolve和reject函数作为参数
    try {
      executor(this.resolve.bind(this), this.reject.bind(this));
    } catch (error) {
      this.reject(error);
    }
  }

  // 异步操作成功时调用，改变状态为resolved并执行成功回调
  resolve(result) {
    if (this.state !== 'pending') return;

    this.state = 'resolved';
    this.result = result;
    this.onResolveCallbacks.forEach(callback => callback(result));
  }

  // 异步操作失败时调用，改变状态为rejected并执行失败回调
  reject(error) {
    if (this.state !== 'pending') return;

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

  // then方法，用于处理成功的回调
  then(onResolve, onReject) {
    return new Promise((resolve, reject) => {
      // 如果当前状态已resolved，直接执行成功回调
      if (this.state === 'resolved') {
        try {
          const result = onResolve(this.result);
          resolve(result);
        } catch (error) {
          reject(error);
        }
      }
      // 如果当前状态为pending，将成功回调添加到队列中
      else if (this.state === 'pending') {
        this.onResolveCallbacks.push(() => {
          try {
            const result = onResolve(this.result);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        });
      }

      // 如果提供失败回调，将其添加到队列中
      if (onReject) {
        this.onRejectCallbacks.push(onReject);
      }
    });
  }

  // catch方法，用于处理失败的回调
  catch(onReject) {
    return this.then(null, onReject);
  }
}