22.自定义封装Promise-异步任务修改 then() 返回值

按照原先做的运行执行下面的异步任务

  let p = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("ok");
    }, 1000);
  });
  const res = p.then(
    (value) => {
      console.log(value);
    },
    (reason) => {
      console.log(reason);
    }
  );
  console.log(res);

  function Promise(executor) {
    const self = this;

    this.PromiseState = "pending";
    this.PromiseResult = null;
    this.callbacks = [];

    function resolve(data) {
      if (self.PromiseState !== "pending") return;
      self.PromiseState = "resolved";
      self.PromiseResult = data;
      self.callbacks.forEach((item) => {
        item.onResolved(self.PromiseResult);
      });
    }
    function reject(data) {
      if (self.PromiseState !== "pending") return;
      self.PromiseState = "rejected";
      self.PromiseResult = data;
      self.callbacks.forEach((item) => {
        item.onRejected(self.PromiseResult);
      });
    }
    try {
      executor(resolve, reject);
    } catch (e) {
      reject(e);
    }
  }
  Promise.prototype.then = function (onResolved, onRejected) {
    return new Promise((resolve, reject) => {
      if (this.PromiseState === "resolved") {
        try {
          let result = onResolved(this.PromiseResult);
          if (result instanceof Promise) {
            result.then(
              (v) => {
                resolve(v);
              },
              (r) => {
                reject(r);
              }
            );
          } else {
            resolve(result);
          }
        } catch (e) {
          reject(e);
        }
      }
      if (this.PromiseState === "rejected") {
        try {
          let result = onRejected(this.PromiseResult);
          if (result instanceof Promise) {
            result.then(
              (v) => {
                resolve(v);
              },
              (r) => {
                reject(r);
              }
            );
          } else {
            resolve(result);
          }
        } catch (e) {
          reject(e);
        }
      }
      if (this.PromiseState === "pending") {
        this.callbacks.push({
          onResolved,
          onRejected,
        });
      }
    });
  };

会发现打印出来的 res 状态为 pending,值为 null

此时 then 方法里面走的是 if (this.PromiseState === "pending") 这个判断,等异步开始执行的时候也只是单纯的调用了 onResolved() 或者 onRejected()

所以我们要对 if (this.PromiseState === "pending") 判断进行改进 

  Promise.prototype.then = function (onResolved, onRejected) {
    const self = this;
    return new Promise((resolve, reject) => {
      if (this.PromiseState === "resolved") {
        try {
          let result = onResolved(this.PromiseResult);
          if (result instanceof Promise) {
            result.then(
              (v) => {
                resolve(v);
              },
              (r) => {
                reject(r);
              }
            );
          } else {
            resolve(result);
          }
        } catch (e) {
          reject(e);
        }
      }
      if (this.PromiseState === "rejected") {
        try {
          let result = onRejected(this.PromiseResult);
          if (result instanceof Promise) {
            result.then(
              (v) => {
                resolve(v);
              },
              (r) => {
                reject(r);
              }
            );
          } else {
            resolve(result);
          }
        } catch (e) {
          reject(e);
        }
      }
      if (this.PromiseState === "pending") {
        this.callbacks.push({
          onResolved: function () {
            // 在这里执行回调函数,拿到回调函数的执行结果,然后进行判断,这里是对象调用 onResolved,所以不能用 this
            let result = onResolved(self.PromiseResult);
            // 然后进行判断
            if (result instanceof Promise) {
              result.then(
                (v) => {
                  resolve(v);
                },
                (r) => {
                  reject(r);
                }
              );
            } else {
              resolve(result);
            }
          },
          onRejected: function () {
            let result = onRejected(self.PromiseResult);
            if (result instanceof Promise) {
              result.then(
                (v) => {
                  resolve(v);
                },
                (r) => {
                  reject(r);
                }
              );
            } else {
              resolve(result);
            }
          },
        });
      }
    });
  };

异步任务抛出异常

 Promise.prototype.then = function (onResolved, onRejected) {
    const self = this;
    return new Promise((resolve, reject) => {
      if (this.PromiseState === "resolved") {
        try {
          let result = onResolved(this.PromiseResult);
          if (result instanceof Promise) {
            result.then(
              (v) => {
                resolve(v);
              },
              (r) => {
                reject(r);
              }
            );
          } else {
            resolve(result);
          }
        } catch (e) {
          reject(e);
        }
      }
      if (this.PromiseState === "rejected") {
        try {
          let result = onRejected(this.PromiseResult);
          if (result instanceof Promise) {
            result.then(
              (v) => {
                resolve(v);
              },
              (r) => {
                reject(r);
              }
            );
          } else {
            resolve(result);
          }
        } catch (e) {
          reject(e);
        }
      }
      if (this.PromiseState === "pending") {
        this.callbacks.push({
          onResolved: function () {
            try {
              // 在这里执行回调函数,拿到回调函数的执行结果,然后进行判断,这里是对象调用 onResolved,所以不能用 this
              let result = onResolved(self.PromiseResult);
              // 然后进行判断
              if (result instanceof Promise) {
                result.then(
                  (v) => {
                    resolve(v);
                  },
                  (r) => {
                    reject(r);
                  }
                );
              } else {
                resolve(result);
              }
            } catch (e) {
              reject(e);
            }
          },
          onRejected: function () {
            try {
              let result = onRejected(self.PromiseResult);
              if (result instanceof Promise) {
                result.then(
                  (v) => {
                    resolve(v);
                  },
                  (r) => {
                    reject(r);
                  }
                );
              } else {
                resolve(result);
              }
            } catch (e) {
              reject(e);
            }
          },
        });
      }
    });
  };