处理链式调用

在真实的 Promise 中，我们可以这样调用.then

const p = new Promise((resolve, reject) => {
  resolve(1);
});

p.then((res) => {
  console.log(res); // 1
  return 2;
}).then((res) => {
  console.log(res); // 2
});

试想在我们手写的Promise中，如何能链式调用呢？

核心要点

• 我们能够执行.then的前提是：p 为一个Promise对象，所以，如果我们想实现链式调用的话，那就必须在上一个.then中返回一个Promise对象。因此，我们尝试在代码的then函数中新增一个Promise对象，并且返回出去
• 由于是Promise对象，所以下一个then函数触发时，也必须是resolve改变状态后才会被执行，故上一个 .then 参数，要拿到上一个 .then 回调返回值

class Promise {
  constructor(executor) {
    this.state = "pending";
    this.value = undefined;
    this.reason = undefined;
    this.onResolvedCallbacks = [];
    this.onRejectedCallbacks = [];
    let resolve = (value) => {
      if (this.state === "pending") {
        this.state = "fulfilled";
        this.value = value;
        this.onResolvedCallbacks.forEach((fn) => fn());
      }
    };
    let reject = (reason) => {
      if (this.state === "pending") {
        this.state = "rejected";
        this.reason = vareasonlue;
        this.onRejectedCallbacks.forEach((fn) => fn());
      }
    };
    try {
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }
  then(onFulfilled, onRejected) {
    // 新建一个Promise，并且返回
    let p2 = new Promise((resolve, reject) => {
      if (this.state === "fulfilled") {
        // onFulfilled 成功的 .then 回调
        let x = onFulfilled(this.value);
        resolve(x);
      }
      if (this.state === "rejected") {
        onRejected(this.reason);
      }
      if (this.state === "pending") {
        this.onResolvedCallbacks.push(() => {
          onFulfilled(this.value);
        });
        this.onRejectedCallbacks.push(() => {
          onRejected(this.reason);
        });
      }
    });
    return p2;
  }
}

const p = new Promise((resolve, reject) => {
  resolve(1);
});

p.then((res) => {
  console.log(res);
  return 2;
}).then((res) => {
  console.log(res);
});

如此以来，就完成了链式调用