promise原理手写

class Promise {
  constructor(excutor) {
    // 设置promise 状态 有 pending fulfilled rejected
    this.promiseState = "pending";
    // promise 返回的结果
    this.promiseResult = null;
    // 用于接收异步需要执行的函数
    this.callbacks = [];
    const that = this;

    function resolve(data) {
      // 当状态不是pending状态 说明已经改完状态,promise 只允许改变一次状态
      if (that.promiseState !== "pending") return;
      that.promiseResult = data;
      // 执行reslove函数 将promise状态改为fulfilled
      that.promiseState = "fulfilled";

      for (let i = 0; i < that.callbacks.length; i++) {
        that.callbacks[i].OnResolved &&
          setTimeout(() => {
            that.callbacks[i].OnResolved(data);
          });
      }
    }
    function reject(data) {
      if (that.promiseState !== "pending") return;
      // 执行reject函数 将promise状态改为rejected
      that.promiseState = "rejected";
      that.promiseResult = data;

      for (let i = 0; i < that.callbacks.length; i++) {
        that.callbacks[i].OnRejected &&
          setTimeout(() => {
            that.callbacks[i].OnRejected(data);
          });
      }
    }
    // 当在执行器函数里不调用resolve reject 使用throw new Error 或者代码有错误 就需要使用try catch 进行捕获错误
    try {
      excutor(resolve, reject);
    } catch (err) {
      // 捕获到错误则使用reject进行错误处理
      reject(err.message);
    }
  }
  // then 方法 当状态改变进行处理相对应状态的回调函数,then方法默认返回一个promise 当return undeined 或者其他值 then返回都是一个成功状态的promise
  // 当回调函数里返回一个新的promise对象, 那么then 返回的就是这个promise对象的状态的promise
  then(OnResolved = (value) => value, OnRejected = null) {
    const self = this;
    // 当then没有传第二个参数,此时如果有错的话就无法传递错误,使其异常穿透
    if (typeof OnRejected !== "function") {
      OnRejected = function (reason) {
        throw reason;
      };
    }
    // then 返回的都是一个promise对象 所以首先返回一个promise
    return new Promise((resolve, reject) => {
      // 封装函数
      function callback(type) {
        try {
          // 先执行 传入的函数看是否是promise promise的话状态就是then的状态,不行promise直接resolve(result)
          let result = type(self.promiseResult);
          result instanceof Promise
            ? result.then(
                (v) => {
                  resolve(result);
                },
                (r) => {
                  reject(result);
                }
              )
            : resolve(result);
        } catch (e) {
          reject(e);
        }
      }
      // 当执行到then的时候,promise状态还是pending,证明是没有调用resolve或reject 或 抛出错误,极大可能是进行异步操作
      if (this.promiseState === "pending") {
        // 异步操作需要将then方法里的回调函数收集起来,等之前异步结束,调用resolve等方法时调用这些回调函数
        // 避免将之前的回调函数覆盖,采用数组追加的方式进行添加
        this.callbacks.push({
          OnResolved: function () {
            callback(OnResolved);
          },
          OnRejected: function () {
            callback(OnRejected);
          },
        });
      } else {
        // 不是pending状态
        this.promiseState === "fulfilled"
          ? setTimeout(() => {
              callback(OnResolved);
            })
          : setTimeout(() => {
              callback(OnRejected);
            });
      }
    });
  }
  catch(OnRejected) {
    // console.log(this.then);
    return this.then(undefined, OnRejected);
  }
  static resolve(value) {
    return new Promise((resolve, reject) => {
      value instanceof Promise
        ? value.then(
            (v) => {
              resolve(v);
            },
            (r) => {
              reject(r);
            }
          )
        : resolve(value);
    });
  }
  static reject(value) {
    return new Promise((resolve, reject) => {
      reject(value);
    });
  }

  static all(promise) {
    let count = 0;
    let result = [];
    return new Promise((resolve, reject) => {
      for (let i = 0; i < promise.length; i++) {
        promise[i].then(
          (v) => {
            count++;
            result[i] = v;
            if (count === promise.length) {
              resolve(result);
            }
          },
          (r) => {
            reject(r);
          }
        );
      }
    });
  }

  static race(promise) {
    return new Promise((resolve, reject) => {
      for (let i = 0; i < promise.length; i++) {
        promise[i].then(
          (v) => {
            resolve(v);
          },
          (r) => {
            reject(r);
          }
        );
      }
    });
  }
}

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容