理解Promise实现的秘密，掌握链式调用的奥秘

2024-02-02 14:39:07

在现代JavaScript开发中，Promise已成为处理异步操作的利器。它不仅能够简化代码，还能避免回调地狱。如果你想成为一名合格的前端开发人员，那么深入理解Promise的实现至关重要。

Promise的本质

Promise本质上是一个对象，它表示一个尚未完成的异步操作。这个操作可能成功，也可能失败。Promise提供了两种状态：resolved和rejected。当操作成功时，Promise的状态变为resolved；当操作失败时，Promise的状态变为rejected。

Promise的构造函数

Promise的构造函数接受一个函数作为参数。这个函数称为executor。executor函数有两个参数：resolve和reject。当异步操作成功时，调用resolve函数来将Promise的状态变为resolved；当异步操作失败时，调用reject函数来将Promise的状态变为rejected。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    if (成功) {
      resolve('成功的结果');
    } else {
      reject('失败的原因');
    }
  }, 1000);
});

Promise的链式调用

Promise的链式调用是通过then方法实现的。then方法接受两个函数作为参数：onFulfilled和onRejected。当Promise的状态变为resolved时，调用onFulfilled函数；当Promise的状态变为rejected时，调用onRejected函数。

promise.then(result => {
  // 处理成功的结果
}, error => {
  // 处理失败的原因
});

链式调用可以连续执行多个then方法，从而形成一个链式结构。这样可以方便地处理复杂的异步操作。

手写Promise

要理解Promise的实现，最好的方法就是自己动手写一个Promise。下面是一个简单的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') return;

      this.state = 'resolved';
      this.value = value;
      this.onFulfilledCallbacks.forEach(callback => callback(value));
    };

    const reject = reason => {
      if (this.state !== 'pending') return;

      this.state = 'rejected';
      this.reason = reason;
      this.onRejectedCallbacks.forEach(callback => callback(reason));
    };

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

  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      if (this.state === 'resolved') {
        setTimeout(() => {
          try {
            const result = onFulfilled(this.value);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            const result = onRejected(this.reason);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else {
        this.onFulfilledCallbacks.push(() => {
          setTimeout(() => {
            try {
              const result = onFulfilled(this.value);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              const result = onRejected(this.reason);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
      }
    });
  }
}