JavaScript深度挖掘：手写Promise打造异步编程新格局

2023-11-14 23:22:14

Promise：JavaScript中的异步编程利器

在现代网络应用程序中，异步编程变得越来越普遍。处理异步操作的需求不断增长，而传统的回调方式却容易导致"回调地狱"，使代码难以维护和理解。

什么是 Promise？

Promise是一个JavaScript对象，它表示一个异步操作的最终结果（完成或失败）。它具有三种状态："pending"（等待）、"fulfilled"（完成）和"rejected"（拒绝）。当一个 Promise 被创建时，它的状态为"pending"。当异步操作完成时，其状态会变为"fulfilled"或"rejected"。如果操作成功，Promise会携带结果值变为"fulfilled"；如果操作失败，它会携带一个错误对象变为"rejected"。

使用 Promise 处理异步操作

使用 Promise 处理异步操作的典型方式是使用.then()方法。.then()接受两个参数：处理"fulfilled"状态的函数和处理"rejected"状态的函数。以下是一个使用 Promise 的简单示例：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, world!');
  }, 1000);
});

promise.then((result) => {
  console.log(result); // 'Hello, world!'
}).catch((error) => {
  console.error(error);
});

手写 Promise

为了深入理解 Promise 的工作原理，让我们一步一步手写一个简单的 Promise 实现：

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

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

  resolve(value) {
    if (this.state !== 'pending') {
      return;
    }

    this.state = 'fulfilled';
    this.value = value;

    this.onFulfilledCallbacks.forEach((callback) => {
      callback(this.value);
    });
  }

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

    this.state = 'rejected';
    this.reason = reason;

    this.onRejectedCallbacks.forEach((callback) => {
      callback(this.reason);
    });
  }

  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        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((value) => {
          setTimeout(() => {
            try {
              const result = onFulfilled(value);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });

        this.onRejectedCallbacks.push((reason) => {
          setTimeout(() => {
            try {
              const result = onRejected(reason);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
      }
    });
  }
}