手写Promise

最新推荐文章于 2024-11-14 10:56:19 发布

张太难

最新推荐文章于 2024-11-14 10:56:19 发布

阅读量150

点赞数

分类专栏： javascript 手写promise 文章标签： javascript 前端面试

本文链接：https://blog.csdn.net/m0_52726759/article/details/129448850

版权

javascript 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

手写promise

1 篇文章 0 订阅

订阅专栏

这篇文章展示了如何从头构建一个简单的Promise类——MyPromise。它包括了Promise的三种状态（pending,fulfilled,rejected）、解决（resolve）和拒绝（reject）方法，以及then方法来处理回调。此外，还提供了静态方法如resolve、reject和all来处理多个Promise实例。

摘要由CSDN通过智能技术生成

直接上代码

class MyPromise {
  #state = "pending";
  #callbacks = [];
  #result = undefined;
  constructor(executor) {
    try {
      executor(this.#resolve.bind(this), this.#reject.bind(this));
    } catch (err) {
      this.#reject(err);
    }
  }
  #resolve(result) {
    this.#state = "fulfilled";
    this.#result = result;
    for (const callback of this.#callbacks) {
      callback.onfulfilled(this.#result);
    }
  }
  #reject(reason) {
    this.#state = "rejected";
    this.#result = reason;
    for (const callback of this.#callbacks) {
      callback.onrejected(this.#result);
    }
  }
  then(onfulfilled, onrejected) {
    return new MyPromise((resolve, reject) => {
      if (this.#state === "fulfilled") {
        if (typeof onfulfilled === "function") {
          const result = onfulfilled(this.#result);
          if (result instanceof MyPromise) {
            result.then(
              (res) => {
                resolve(res);
              },
              (err) => {
                reject(err);
              }
            );
          } else {
            resolve(result);
          }
        } else {
          resolve(this.#result);
        }
      }
      if (this.#state === "rejected") {
        if (typeof onrejected === "function") {
          const result = onrejected(this.#result);
          if (result instanceof MyPromise) {
            result.then(
              (res) => {
                resolve(res);
              },
              (err) => {
                reject(err);
              }
            );
          } else {
            resolve(result);
          }
        } else {
          reject(this.#result);
        }
      }
      if (this.#state === "pending") {
        this.#callbacks.push({
          onfulfilled: () => {
            if (typeof onfulfilled === "function") {
              const result = onfulfilled(this.#result);
              if (result instanceof MyPromise) {
                result.then(
                  (res) => {
                    resolve(res);
                  },
                  (err) => {
                    reject(err);
                  }
                );
              } else {
                resolve(result);
              }
            } else {
              resolve(this.#result);
            }
          },
          onrejected: () => {
            if (typeof onrejected === "function") {
              const result = onrejected(this.#result);
              if (result instanceof MyPromise) {
                result.then(
                  (res) => {
                    resolve(res);
                  },
                  (err) => {
                    reject(err);
                  }
                );
              } else {
                resolve(result);
              }
            } else {
              reject(this.#result);
            }
          },
        });
      }
    });
  }
  catch(onrejected) {
    this.then(undefined, onrejected);
  }
  static resolve(data) {
    return new MyPromise((resolve, reject) => {
      if (data instanceof MyPromise) {
        data.then(
          (res) => {
            resolve(res);
          },
          (err) => {
            reject(err);
          }
        );
      } else {
        resolve(data);
      }
    });
  }
  static reject(data) {
    return new MyPromise((resolve, reject) => {
      reject(data);
    });
  }
  static all(promises) {
    return new MyPromise((resolve, reject) => {
      let count = 0;
      let fulfilledCount = 0;
      let resultList = [];
      for (const promise of promises) {
        let index = count;
        promise.then(
          (res) => {
            resultList[index] = res;
            fulfilledCount++;
            if (fulfilledCount === count) {
              resolve(resultList);
            }
          },
          (err) => {
            reject(err);
          }
        );
        count++;
      }
      if (count === 0) {
        resolve([]);
      }
    });
  }
}