promise 基本实现 #

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("ok");
  }, 1000);
});

promise.then(
  (data) => {
    console.log(data, "success");
  },
  (err) => {
    console.log(err, "fail");
  }
);

promise.then(
  (data) => {
    console.log(data, "success1");
  },
  (err) => {
    console.log(err, "fail");
  }
);

promise.then(
  (data) => {
    console.log(data, "success2");
  },
  (err) => {
    console.log(err, "fail");
  }
);

const PENDING = "PENDING"; // 等待中的状态
const FULFILLED = "FULFILLED"; // 完成状态
const REJECTED = "REJECTED"; // 失败状态

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("ok");
  }, 1000);
});
// 这时候 new Promise 中的函数就是executor,只要给executor传入resolve、reject两个方法

 this.status = PENDING; // 默认是等待
 this.value = undefined; // 成功的原因
 this.reason = undefined; // 失败的原因

const resolve = (value) => {
    // 如果是等待中泽修改
    if (this.status === PENDING) {
        this.status = FULFILLED;
        this.value = value;
    }
};

// then 中会返回 2 个方法，一个是完成、一个是失败
if (this.status === FULFILLED) {
    // TODO...
    onFULFILLED(this.value);
}

// 如果是等待中
// 这时候要先判断是否在等待中，如果已经有结果了直接返回结果
// 在.then中可以写入方法，
if (this.status === PENDING) {
    // 如果我想拓展一些功能
    this.onResolveCallbacks.push(() => {
        // TODO...
        onFULFILLED(this.value);
    });
}

// 在构造函数中再去做数据的执行
 const resolve = (value) => {
    if (this.status === PENDING) {
        this.status = FULFILLED;
        this.value = value;
        // ++ 执行方法的回调
        this.onResolveCallbacks.forEach((cb) => cb());
    }
};

this.onResolveCallbacks = []; // 例如成功的回调
const resolve = (value) => {
    // 只有状态是 pending 的时候才可以改变状态
    if (this.status === PENDING) {
        this.status = FULFILLED;
        this.value = value;
        // 成功调用成功的回调
        this.onResolveCallbacks.forEach((cb) => cb());
    }
};

const PENDING = "PENDING";
const FULFILLED = "FULFILLED";
const REJECTED = "REJECTED";

class Promise {
  constructor(executor) {
    this.status = PENDING; // 默认是等待
    this.value = undefined; // 成功的原因
    this.reason = undefined; // 失败的原因

    this.onResolveCallbacks = [];
    this.onRejectCallbacks = [];
    // promise调用 then 的时候 可能状态依旧是 pending 那么我们需要将回调存起来
    // 等待过一会调用resolve时候 onResolveCallbacks
    // 等待过一会调用reject时候 onRejectCallbacks

    const resolve = (value) => {
      // 只有状态是 pending 的时候才可以改变状态
      if (this.status === PENDING) {
        this.status = FULFILLED;
        this.value = value;
        // 成功调用成功的回调
        this.onResolveCallbacks.forEach((cb) => cb());
      }
    };
    const reject = (reason) => {
      if (this.status === PENDING) {
        this.status = REJECTED;
        this.reason = reason;
        // 失败调用失败的回调
        this.onRejectCallbacks.forEach((cb) => cb());
      }
    };
    try {
      // 调用excutor 会自动传入 resolve和reject
      executor(resolve, reject);
    } catch (e) {
      reject(e);
    }
  }

  then(onFULFILLED, onRejectd) {
    // 调用 then 的时候 已经确定了是成功还是失败
    if (this.status === FULFILLED) {
      // TODO...
      onFULFILLED(this.value);
    }
    if (this.status === REJECTED) {
      // TODO...
      onRejectd(this.reason);
    }

    if (this.status === PENDING) {
      // 如果我想拓展一些功能，就不行
      // this.onResolveCallbacks.push(onFULFILLED)
      // this.onRejectCallbacks.push(onRejectd)

      this.onResolveCallbacks.push(() => {
        // TODO...
        onFULFILLED(this.value);
      });

      this.onRejectCallbacks.push(() => {
        // TODO...
        onRejectd(this.reason);
      });
    }
  }
}