150行实现Promise 90%的功能

2023-09-02 22:49:11

Promise的基本概念

Promise是JavaScript中处理异步操作的标准API。它是一个对象，表示一个异步操作的最终完成或失败及其结果值。Promise可以被用来链式调用，即一个Promise的结果可以作为另一个Promise的输入，从而可以方便地处理多个异步操作。

Promise的语法

一个Promise对象有两个主要方法：

then()方法：用于注册回调函数，当Promise完成或失败时执行。
catch()方法：用于注册回调函数，当Promise失败时执行。

then()和catch()方法都会返回一个新的Promise对象，因此可以实现Promise的链式调用。

Promise的常见用法

Promise的常见用法包括：

处理AJAX请求
处理定时器
处理WebSockets
处理文件读写

Promise的实现原理

Promise的实现原理是基于事件循环。事件循环是一个不断循环的进程，负责处理事件队列中的事件。当一个Promise被创建时，它会被添加到事件队列中。当Promise完成或失败时，它会从事件队列中删除，并且它的then()或catch()方法注册的回调函数会被执行。

Promise的实现示例

以下是一个用150行代码实现Promise 90%功能的示例：

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

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

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

    executor(resolve, reject);
  }

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

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