JS 根据 Promise/A+ 实现 Promise

• 整体结构

class Promise {
  constructor(executor) {
    let self = this;
    self.status = "pendding";
    self.value = undefined;
    self.reason = undefined;

    let resolve = (value) => {
      if (self.status === "pendding") {
        self.status = "fulfilled";
        self.value = value;
      }
    };
    let reject = (reason) => {
      if (self.status === "pendding") {
        self.status = "rejected";
        self.reason = reason;
      }
    };

    executor(resolve, reject);
  }
}

• then 方法

class Promise {
  constructor(executor) {...}
  
  then(onFulfilled, onRejected) {
    let self = this;
    if (self.status === "fulfilled") {
      onFulfilled(self.value);
    }
    if (self.status === "rejected") {
      onRejected(self.reason);
    }
  }
}

• 异步调用

class Promise {
  constructor(executor) {
    let self = this;
    self.status = "pendding";
    self.value = undefined;
    self.reason = undefined;

    self.onFulfilledCallbacks = [];
    self.onRejectedCallbacks = [];

    let resolve = (value) => {
      if (self.status === "pendding") {
        self.status = "fulfilled";
        self.value = value;
        self.onFulfilledCallbacks.forEach((fn) => fn());
      }
    };
    let reject = (reason) => {
      if (self.status === "pendding") {
        self.status = "rejected";
        self.reason = reason;
        self.onRejectedCallbacks.forEach((fn) => fn());
      }
    };

    executor(resolve, reject);
  }
  then(onFulfilled, onRejected) {
    let self = this;
    if (self.status === "fulfilled") {
      onFulfilled(self.value);
    }
    if (self.status === "rejected") {
      onRejected(self.reason);
    }
    if (self.status === "pendding") {
      self.onFulfilledCallbacks.push(() => onFulfilled(self.value));
      self.onRejectedCallbacks.push(() => onRejected(self.reason));
    }
  }
}

• 链式调用
  • 本质上就是发布订阅

class Promise {
  constructor(executor) {
    let self = this;
    self.status = "pendding";
    self.value = undefined;
    self.reason = undefined;

    self.onFulfilledCallbacks = [];
    self.onRejectedCallbacks = [];

    let resolve = (value) => {
      if (self.status === "pendding") {
        self.status = "fulfilled";
        self.value = value;
        self.onFulfilledCallbacks.forEach((fn) => fn());
      }
    };
    let reject = (reason) => {
      if (self.status === "pendding") {
        self.status = "rejected";
        self.reason = reason;
        self.onRejectedCallbacks.forEach((fn) => fn());
      }
    };

    executor(resolve, reject);
  }
  then(onFulfilled, onRejected) {
    let self = this;
    let promise2 = new Promise((resolve, reject) => {
      if (self.status === "fulfilled") {
        setTimeout(() => {
          try {
            let x = onFulfilled(self.value);
            this._reoslvePromise(promise2, x, resolve, reject);
          } catch (ex) {
            reject(ex);
          }
        }, 0);
      }
      if (self.status === "rejected") {
        try {
          let x = onRejected(self.reason);
          resolve(x);
        } catch (ex) {
          reject(ex);
        }
      }
      if (self.status === "pendding") {
        self.onFulfilledCallbacks.push(() => {
          try {
            let x = onFulfilled(self.value);
            resolve(x);
          } catch (ex) {
            reject(ex);
          }
        });
        self.onRejectedCallbacks.push(() => {
          try {
            let x = onRejected(self.reason);
            resolve(x);
          } catch (ex) {
            reject(ex);
          }
        });
      }
    });

    return promise2;
  }
  _reoslvePromise(promise, x, resolve, reject) {
    if (promise === x) {
      reject(new TypeError("循环引用了"));
    }
    if (x != null && (typeof x === "object" || typeof x === "function")) {
      try {
        let then = x.then;
        if (typeof then === "function") {
          then.call(
            x,
            (y) => this._reoslvePromise(promise, y, resolve, reject),
            (r) => reject(r)
          );
        } else {
          // x 是一个普通对象
          resolve(x);
        }
      } catch (ex) {
        reject(ex);
      }
    } else {
      resolve(x);
    }
  }
}

• 值穿透
  • 所谓值穿透，即 new Promise().then().then().then(data => console.log(data))

class Promise {
  constructor() {...}

  then(onFulfilled, onRejected) {
    onFulfilled =
      typeof onFulfilled === "function" ? onFulfilled : (data) => data;
    onRejected =
      typeof onRejected === "function"
        ? onRejected
        : (err) => {
            throw err;
          };
          
     ...
     
  }
}

• 完整逻辑

class Promise {
  #x = 123;
  constructor(executor) {
    let self = this;
    self.status = "pendding";
    self.value = undefined;
    self.reason = undefined;

    self.onFulfilledCallbacks = [];
    self.onRejectedCallbacks = [];

    let resolve = (value) => {
      if (self.status === "pendding") {
        self.status = "fulfilled";
        self.value = value;
        self.onFulfilledCallbacks.forEach((fn) => fn());
      }
    };
    let reject = (reason) => {
      if (self.status === "pendding") {
        self.status = "rejected";
        self.reason = reason;
        self.onRejectedCallbacks.forEach((fn) => fn());
      }
    };

    try {
      executor(resolve, reject);
    } catch (ex) {
      reject(ex);
    }
  }
  then(onFulfilled, onRejected) {
    onFulfilled =
      typeof onFulfilled === "function" ? onFulfilled : (data) => data;
    onRejected =
      typeof onRejected === "function"
        ? onRejected
        : (err) => {
            throw err;
          };

    let self = this;
    let promise2 = new Promise((resolve, reject) => {
      if (self.status === "fulfilled") {
        setTimeout(() => {
          try {
            let x = onFulfilled(self.value);
            this._reoslvePromise(promise2, x, resolve, reject);
          } catch (ex) {
            reject(ex);
          }
        }, 0);
      }
      if (self.status === "rejected") {
        try {
          let x = onRejected(self.reason);
          resolve(x);
        } catch (ex) {
          reject(ex);
        }
      }
      if (self.status === "pendding") {
        self.onFulfilledCallbacks.push(() => {
          try {
            let x = onFulfilled(self.value);
            resolve(x);
          } catch (ex) {
            reject(ex);
          }
        });
        self.onRejectedCallbacks.push(() => {
          try {
            let x = onRejected(self.reason);
            resolve(x);
          } catch (ex) {
            reject(ex);
          }
        });
      }
    });

    return promise2;
  }
  _reoslvePromise(promise, x, resolve, reject) {
    if (promise === x) {
      reject(new TypeError("循环引用了"));
    }
    if (x != null && (typeof x === "object" || typeof x === "function")) {
      try {
        let then = x.then;
        if (typeof then === "function") {
          then.call(
            x,
            (y) => this._reoslvePromise(promise, y, resolve, reject),
            (r) => reject(r)
          );
        } else {
          // x 是一个普通对象
          resolve(x);
        }
      } catch (ex) {
        reject(ex);
      }
    } else {
      resolve(x);
    }
  }
}