如何手写一个promise实例

• 手写的Promise实例步骤
• 更为丰富的实例

手写的Promise实例步骤

要手写一个Promise实例，需要以下步骤：

1. 定义一个 Promise 类：创建一个名为Promise的类，它将作为Promise实例的构造函数。

2. 设置初始状态：在Promise类的构造函数中，初始化promise的状态为pending，并创建两个变量用于存储promise的结果（resolve的值）和拒绝原因（reject的值）。

3. 定义resolve和reject函数：在Promise类中定义resolve和reject函数，这些函数将用于将promise从pending状态转换为fulfilled或rejected状态，并保存promise的结果或拒绝原因。

4. 定义then方法：在Promise类中定义then方法，它接受两个参数，分别是成功回调函数和失败回调函数。当promise状态变为fulfilled时，执行成功回调函数，并传递promise的结果；当promise状态变为rejected时，执行失败回调函数，并传递拒绝原因。

5. 定义catch方法：在Promise类中定义catch方法，它接受一个参数，即失败回调函数。当promise状态变为rejected时，执行失败回调函数，并传递拒绝原因。

6. 实现异步操作：在Promise类中添加执行异步操作的方法，例如使用setTimeout模拟异步操作。在异步操作完成后，使用resolve将promise状态转为fulfilled，并传递异步操作的结果；或者使用reject将promise状态转为rejected，并传递拒绝原因。

下面是一个简单的Promise实例的示例代码：

class Promise {
  constructor() {
    this.status = 'pending';
    this.value = undefined;
    this.reason = undefined;
  }

  resolve(value) {
    if (this.status === 'pending') {
      this.status = 'fulfilled';
      this.value = value;
    }
  }

  reject(reason) {
    if (this.status === 'pending') {
      this.status = 'rejected';
      this.reason = reason;
    }
  }

  then(onFulfilled, onRejected) {
    if (this.status === 'fulfilled') {
      onFulfilled(this.value);
    } else if (this.status === 'rejected') {
      onRejected(this.reason);
    }
  }

  catch(onRejected) {
    if (this.status === 'rejected') {
      onRejected(this.reason);
    }
  }

  // 示例异步操作，使用setTimeout模拟
  asyncOperation() {
    setTimeout(() => {
      const result = 'Async operation completed.';
      this.resolve(result);
    }, 1000);
  }
}

// 使用示例
const promise = new Promise();

promise.asyncOperation();

promise.then((result) => {
  console.log(result); // 输出：Async operation completed.
}).catch((reason) => {
  console.error(reason);
});

上述代码是一个简单的Promise实例的手写示例，供参考。实际使用中，还需要进一步完善Promise的功能，例如支持链式调用、处理异步操作的错误等。

更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。

更为丰富的实例

下面是一个手写的Promise实例，并附有注释说明每个部分的作用：

class Promise {
  constructor(executor) {
    // 初始化Promise的状态和值
    this.state = 'pending';
    this.value = undefined;

    // 存储then方法的回调函数
    this.callbacks = [];

    // 定义resolve和reject方法，用于改变Promise的状态和值
    const resolve = (value) => {
      // 状态只能由pending变为fulfilled
      if (this.state !== 'pending') return;
      this.state = 'fulfilled';
      this.value = value;

      // 执行存储的回调函数
      this.callbacks.forEach((callback) => callback.onFulfilled(value));
    };

    const reject = (reason) => {
      // 状态只能由pending变为rejected
      if (this.state !== 'pending') return;
      this.state = 'rejected';
      this.value = reason;

      // 执行存储的回调函数
      this.callbacks.forEach((callback) => callback.onRejected(reason));
    };

    try {
      // 执行executor函数，传入resolve和reject方法
      executor(resolve, reject);
    } catch (error) {
      // 如果executor函数执行过程中出现错误，则调用reject方法
      reject(error);
    }
  }

  

  then(onFulfilled, onRejected) {
    // 创建一个新的Promise实例
    return new Promise((resolve, reject) => {
      const handleCallback = (callback) => {
        try {
          // 判断当前Promise的状态，执行对应的回调函数
          if (this.state === 'fulfilled') {
            resolve(callback.onFulfilled(this.value));
          } else if (this.state === 'rejected') {
            resolve(callback.onRejected(this.value));
          }
        } catch (error) {
          // 如果执行回调函数时出现错误，则调用reject方法
          reject(error);
        }
      };

      if (this.state === 'pending') {
        // 如果Promise还处于pending状态，则将回调函数存储起来
        this.callbacks.push({
          onFulfilled: (value) => {
            handleCallback({ onFulfilled, onRejected });
          },
          onRejected: (reason) => {
            handleCallback({ onFulfilled, onRejected });
          },
        });
      } else {
        // 如果Promise已经处于fulfilled或rejected状态，则立即执行对应的回调函数
        handleCallback({ onFulfilled, onRejected });
      }
    });
  }

  catch(onRejected) {
    // catch方法其实就是then方法的语法糖，只是忽略了onFulfilled参数
    return this.then(undefined, onRejected);
  }


  finally(onFinally) {
    // finally方法也是then方法的语法糖，只是无论Promise是成功还是失败，都会执行onFinally函数
    return this.then(
      (value) => {
        onFinally();
        return value;
      },
      (reason) => {
        onFinally();
        throw reason;
      }
    );
  }

  static resolve(value) {
    // 返回一个状态为fulfilled的Promise实例，值为传入的value
    return new Promise((resolve) => resolve(value));
  }

  static reject(reason) {
    // 返回一个状态为rejected的Promise实例，值为传入的reason
    return new Promise((resolve, reject) => reject(reason));
  }

  static all(promises) {
    // 返回一个新的Promise实例，其状态和值由所有传入的Promise实例决定
    return new Promise((resolve, reject) => {
      const results = []; // 存储所有Promise实例的返回值
      let count = 0; // 记录已经处理完的Promise实例的数量

      const processResult = (index, value) => {
        results[index] = value;
        count++;

        if (count === promises.length) {
          resolve(results);
        }
      };

      promises.forEach((promise, index) => {
        // 对于每个Promise实例，当其状态变为fulfilled时，将其返回值加入到results数组中
        promise.then((value) => processResult(index, value)).catch((reason) => reject(reason));
      });
    });
  }

  static race(promises) {
    // 返回一个新的Promise实例，其状态和值由最先完成的Promise实例决定
    return new Promise((resolve, reject) => {
      promises.forEach((promise) => {
        // 对于每个Promise实例，只要有一个状态变为fulfilled或rejected，就立即将其返回值传递给新的Promise实例
        promise.then((value) => resolve(value)).catch((reason) => reject(reason));
      });
    });
  }
}

这是一个简单的Promise实现，包含基本的状态管理、回调函数存储和执行、静态方法等功能。

当然，在实际开发中，还需要考虑一些更复杂的情况，如异步操作、多次调用then方法等。