Promise

97 阅读10分钟


/**
 *
 *
 */

(function (window) {
  /**
   * 构造函数
   * excutor: 执行器函数
   */
  function Promise(excutor) {
    // 将当前Promise 对象保存起来
    const self = this;

    self.status = "pending"; // promise 对象指定status属性,初使值为pending
    self.data = undefined; // 给promis 指定一个用于存储结果数据的属性
    self.callbacks = []; // 每一个元素结构 {onResolved(){}, onRejectd(){}}

    // 改变状态的回调函数
    function resolve(value) {
      // 状态只能改一次 如果当前状态不是pending.直接结束
      if (self.status !== "pending") return;

      // 将状态改为resolved
      self.status = "resolved";
      // 保存value数据
      self.data = value;
      // 如果有代执行的callback函数,立即异步执行回调函数
      if (self.callbacks.length > 0) {
        self.callbacks.forEach((callbacksObj) => {
          // 异步执行 用setTimeout模拟
          setTimeout(() => {
            callbacksObj.onResolved(value);
          }, 0);
        });
      }
    }

    // 改变状态的回调函数
    function reject(reason) {
      self.status = "rejected";
      self.data = reason;
      // 如果有代执行的callback函数,立即异步执行回调函数
      if (self.callbacks.length > 0) {
        self.callbacks.forEach((callbacksObj) => {
          // 异步执行 用setTimeout模拟
          setTimeout(() => {
            callbacksObj.onRejected(reason);
          }, 0);
        });
      }
    }

    // 执行 执行器函数
    // 如果执行器抛出异常,promis 变为失败
    try {
      excutor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

  /**
   * then
   */

  Promise.prototype.then = function (onResolved, onRejected) {
    const self = this;

    // 向后传递成功的value
    onResolved =
      typeof onResolved === "function" ? onResolved : (value) => value;

    // 指定默认的失败的回调,实现错误/异常穿透. (向后传递失败的reason)
    onRejected =
      typeof onRejected === "function"
        ? onRejected
        : (reason) => {
            throw reason;
          };

    // 返回一个新的promise对象
    return new Promise((resolve, reject) => {
      /**
       * 调用指定的回调函数处理, 根据执行结果,改变return 的promise状态
       */

      const handle = (callback) => {
        /**
         *  1. 如果抛出异常,return 的promise 就会失败,reason 就是error
         *  2. 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
         *  3. 如果回调函数返回的是promise, 则return的promise的结果就是这个promsie的结果
         */
        try {
          const result = callback(self.data);
          if (result instanceof Promise) {
            result.then(
              (value) => resolve(value), // 当result 成功的时候,return 的promsie 也成功
              (reason) => reject(reason) // 当result 失败的时候,return 的promsie 也失败
            );
          } else {
            // 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
            resolve(result);
          }
        } catch (error) {
          reject(error);
        }
      };

      if (self.status === "pending") {
        // 当前状态还是pending状态,将回调函数保存起来(先执行回调函数,然后改状态)
        self.callbacks.push({
          onResolved(value) {
            // handle(onResolved);
            try {
              const result = onResolved(self.data);
              if (result instanceof Promise) {
                result.then(
                  (value) => resolve(value), // 当result 成功的时候,return 的promsie 也成功
                  (reason) => reject(reason) // 当result 失败的时候,return 的promsie 也失败
                );
              } else {
                // 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
                resolve(result);
              }
            } catch (error) {
              reject(error);
            }
          },
          onRejected() {
            // onRejected(self.data);
            try {
              const result = onRejected(self.data);
              if (result instanceof Promise) {
                result.then(
                  (value) => resolve(value), // 当result 成功的时候,return 的promsie 也成功
                  (reason) => reject(reason) // 当result 失败的时候,return 的promsie 也失败
                );
              } else {
                // 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
                resolve(result);
              }
            } catch (error) {
              reject(error);
            }
          },
        });
      } else if (self.status === "resolved") {
        setTimeout(() => {
          // .then 返回的promise状态由onResolved状态决定
          /**
           *  1. 如果抛出异常,return 的promise 就会失败,reason 就是error
           *  2. 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
           *  3. 如果回调函数返回的是promise, 则return的promise的结果就是这个promsie的结果
           */
          try {
            const result = onResolved(self.data);
            if (result instanceof Promise) {
              result.then(
                (value) => resolve(value), // 当result 成功的时候,return 的promsie 也成功
                (reason) => reject(reason) // 当result 失败的时候,return 的promsie 也失败
              );
            } else {
              // 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
              resolve(result);
            }
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else {
        setTimeout(() => {
          // .then 返回的promise状态由onResolved状态决定
          /**
           *  1. 如果抛出异常,return 的promise 就会失败,reason 就是error
           *  2. 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
           *  3. 如果回调函数返回的是promise, 则return的promise的结果就是这个promsie的结果
           */
          try {
            const result = onRejected(self.data);
            if (result instanceof Promise) {
              result.then(
                (value) => resolve(value), // 当result 成功的时候,return 的promsie 也成功
                (reason) => reject(reason) // 当result 失败的时候,return 的promsie 也失败
              );
            } else {
              // 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
              resolve(result);
            }
          } catch (error) {
            reject(error);
          }
        }, 0);
      }
    });
  };

  /**
   * catch
   */
  Promise.prototype.catch = function (onRejected) {
    return this.then(undefined, onRejected);
  };

  /**
   * Promise.resolve
   */

  Promise.resolve = function (value) {
    return new Promise((resolve, reject) => {
      if (value instanceof Promise) {
        value.then(
          (value) => {
            resolve(value);
          },
          (reason) => {
            reject(reason);
          }
        );
      } else {
        resolve(value);
      }
    });
  };

  /**
   * Promise.reject
   */

  Promise.reject = function (reason) {
    return new Promise((resolve, reject) => {
      reject(reason);
    });
  };

  /**
   * Promise.all
   */

  Promise.all = function (promises) {
    let data = new Array(promises.length);
    let i = 0;
    return new Promise((resolve, reject) => {
      promises.forEach((p, index) => {
        Promise.resolve(p).then(
          (value) => {
            data[index] = value;
            i++;
            if (i === promises.length) {
              resolve(data);
            }
          },
          (reason) => {
            reject(reason);
          }
        );
      });
    });
  };

  /**
   * Promise.race
   */

  Promise.race = function (promises) {
    return new Promise((resolve, reject) => {
      promises.forEach((p) => {
        Promise.resolve(p).then(
          (value) => resolve(value),
          (reason) => reject(reason)
        );
      });
    });
  };

  // async 函数返回值是一个promise对象
  // promise 对象结果由async函数执行的返回值决定

  // await 右侧的表达式一般为promise对象,也可以是其他的值
  // 如果表达式是promise对象,awaite返回的是promise成功的值
  // 如果是一个其他值,直接将这个值作为awaite的返回值

  // await必须写在async函数中,但是async函数中可以没有await
  // 如果await的promise失败了,就会抛出异常,需要用try catch 来捕获处理

  // 宏任务: 定时器回调, Dom事件回调, ajax回调
  // 微任务: promise 回调/ mutationObserver 回调

  // 先执行完所有的初始化同步代码,然后去执行队列里面的执行函数,队列里面先去执行微队列,然后执行完微队列里面所有的任务,
  // 然后去执行宏队列,如果在执行宏队列的时候,产生了新的微任务,则执行完微任务再去接着执行宏队列 (每次执行宏任务之前
  // 要保证把所有的微任务全部执行完, (先去看微任务里面有没有任务,有然后全部执行完)然后才去执行下一个宏任务)
})(window);



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

    // 如果是一般值,p1成功,value就是这个值
    const p1 = Promise.resolve(2);
    // 如果是成功的primie, p2成功,value 就是这个promise成功的value
    const p2 = Promise.resolve(Promise.resolve(3));
    // 如果是失败的promise. p3失败,reason 是这个promise 的reason
    const p3 = Promise.resolve(Promise.reject(4));

    // Promise函数对象的reject方法
    // 返回一个指定reason的失败的Promise

    Promise.reject = function (reason) {
      // 返回一个失败的promise
      return new Promise((resolve, reject) => {
        reject(reason);
      });
    };

    // promise 函数对象的resolve方法
    // 返回一个指定结果的成功的promies
    Promise.resolve = function (value) {
      // 返回一个成功或者失败的promise
      return new Promise((resolve, reject) => {
        // 如果value 是一个promise
        if (value instanceof Promise) {
          //  使用value结果作为promise结果
          value.then(resolve, reject);
        } else {
          // value 不是promise => promise 变为成功,数据是value
          resolve(value);
        }
      });
    };

    // Promise.all
    // 返回一个新的promise
    Promise.all = function (promises) {
      const values = new Array(promises.length); // 用来保存所有成功values的数组
      // 记录成功promise的数量
      let i = 0;

      return new Promise((resolve, reject) => {
        // 遍历promise获取每一个promise的结果
        promises.forEach((p, index) => {
          Promise.resolve(p).then(
            (value) => {
              // p成功,将成功的value保存到values中
              // 不能直接values.push(value)这样不能保证顺序,成功的会先push
              values[index] = value;
              i++;
              // 如果全部成功,将return的promise改变成功
              if (i === promises.length) {
                resolve(values);
              }
            },
            (reason) => {
              // 只要有一个失败的,return的promise就失败
              reject(reason);
            }
          );
        });
      });
    };

    // Promise.race

    Promise.race = function (promises) {
      return new Promise((resolve, reject) => {
        // 遍历promise获取每一个promise的结果
        promises.forEach((p, index) => {
          p.then(
            (value) => {
              // 一旦有成功的。返回的变为成功
              resolve(value);
            },
            (reason) => {
              // 只要有一个失败的,return的promise就失败
              reject(reason);
            }
          );
        });
      });
    };

/**
 *
 *
 */

(function (window) {
  class Promise {
    /**
     * 构造函数
     * excutor: 执行器函数
     */
    constructor(excutor) {
      // 将当前Promise 对象保存起来
      const self = this;

      self.status = "pending"; // promise 对象指定status属性,初使值为pending
      self.data = undefined; // 给promis 指定一个用于存储结果数据的属性
      self.callbacks = []; // 每一个元素结构 {onResolved(){}, onRejectd(){}}

      // 改变状态的回调函数
      function resolve(value) {
        // 状态只能改一次 如果当前状态不是pending.直接结束
        if (self.status !== "pending") return;

        // 将状态改为resolved
        self.status = "resolved";
        // 保存value数据
        self.data = value;
        // 如果有代执行的callback函数,立即异步执行回调函数
        if (self.callbacks.length > 0) {
          self.callbacks.forEach((callbacksObj) => {
            // 异步执行 用setTimeout模拟
            setTimeout(() => {
              callbacksObj.onResolved(value);
            }, 0);
          });
        }
      }

      // 改变状态的回调函数
      function reject(reason) {
        self.status = "rejected";
        self.data = reason;
        // 如果有代执行的callback函数,立即异步执行回调函数
        if (self.callbacks.length > 0) {
          self.callbacks.forEach((callbacksObj) => {
            // 异步执行 用setTimeout模拟
            setTimeout(() => {
              callbacksObj.onRejected(reason);
            }, 0);
          });
        }
      }

      // 执行 执行器函数
      // 如果执行器抛出异常,promis 变为失败
      try {
        excutor(resolve, reject);
      } catch (error) {
        reject(error);
      }
    }

    /**
     * then
     */

    then(onResolved, onRejected) {
      const self = this;

      // 向后传递成功的value
      onResolved =
        typeof onResolved === "function" ? onResolved : (value) => value;

      // 指定默认的失败的回调,实现错误/异常穿透. (向后传递失败的reason)
      onRejected =
        typeof onRejected === "function"
          ? onRejected
          : (reason) => {
              throw reason;
            };

      // 返回一个新的promise对象
      return new Promise((resolve, reject) => {
        /**
         * 调用指定的回调函数处理, 根据执行结果,改变return 的promise状态
         */

        const handle = (callback) => {
          /**
           *  1. 如果抛出异常,return 的promise 就会失败,reason 就是error
           *  2. 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
           *  3. 如果回调函数返回的是promise, 则return的promise的结果就是这个promsie的结果
           */
          try {
            const result = callback(self.data);
            if (result instanceof Promise) {
              result.then(
                (value) => resolve(value), // 当result 成功的时候,return 的promsie 也成功
                (reason) => reject(reason) // 当result 失败的时候,return 的promsie 也失败
              );
            } else {
              // 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
              resolve(result);
            }
          } catch (error) {
            reject(error);
          }
        };

        if (self.status === "pending") {
          // 当前状态还是pending状态,将回调函数保存起来(先执行回调函数,然后改状态)
          self.callbacks.push({
            onResolved(value) {
              // handle(onResolved);
              try {
                const result = onResolved(self.data);
                if (result instanceof Promise) {
                  result.then(
                    (value) => resolve(value), // 当result 成功的时候,return 的promsie 也成功
                    (reason) => reject(reason) // 当result 失败的时候,return 的promsie 也失败
                  );
                } else {
                  // 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
                  resolve(result);
                }
              } catch (error) {
                reject(error);
              }
            },
            onRejected() {
              // onRejected(self.data);
              try {
                const result = onRejected(self.data);
                if (result instanceof Promise) {
                  result.then(
                    (value) => resolve(value), // 当result 成功的时候,return 的promsie 也成功
                    (reason) => reject(reason) // 当result 失败的时候,return 的promsie 也失败
                  );
                } else {
                  // 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
                  resolve(result);
                }
              } catch (error) {
                reject(error);
              }
            },
          });
        } else if (self.status === "resolved") {
          setTimeout(() => {
            // .then 返回的promise状态由onResolved状态决定
            /**
             *  1. 如果抛出异常,return 的promise 就会失败,reason 就是error
             *  2. 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
             *  3. 如果回调函数返回的是promise, 则return的promise的结果就是这个promsie的结果
             */
            try {
              const result = onResolved(self.data);
              if (result instanceof Promise) {
                result.then(
                  (value) => resolve(value), // 当result 成功的时候,return 的promsie 也成功
                  (reason) => reject(reason) // 当result 失败的时候,return 的promsie 也失败
                );
              } else {
                // 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
                resolve(result);
              }
            } catch (error) {
              reject(error);
            }
          }, 0);
        } else {
          setTimeout(() => {
            // .then 返回的promise状态由onResolved状态决定
            /**
             *  1. 如果抛出异常,return 的promise 就会失败,reason 就是error
             *  2. 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
             *  3. 如果回调函数返回的是promise, 则return的promise的结果就是这个promsie的结果
             */
            try {
              const result = onRejected(self.data);
              if (result instanceof Promise) {
                result.then(
                  (value) => resolve(value), // 当result 成功的时候,return 的promsie 也成功
                  (reason) => reject(reason) // 当result 失败的时候,return 的promsie 也失败
                );
              } else {
                // 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
                resolve(result);
              }
            } catch (error) {
              reject(error);
            }
          }, 0);
        }
      });
    }

    /**
     * catch
     */
    catch(onRejected) {
      return this.then(undefined, onRejected);
    }

    /**
     * Promise.resolve
     */

    static resolve = function (value) {
      return new Promise((resolve, reject) => {
        if (value instanceof Promise) {
          value.then(
            (value) => {
              resolve(value);
            },
            (reason) => {
              reject(reason);
            }
          );
        } else {
          resolve(value);
        }
      });
    };

    /**
     * Promise.reject
     */

    static reject = function (reason) {
      return new Promise((resolve, reject) => {
        reject(reason);
      });
    };

    /**
     * Promise.all
     */

    static all = function (promises) {
      let data = new Array(promises.length);
      let i = 0;
      return new Promise((resolve, reject) => {
        promises.forEach((p, index) => {
          Promise.resolve(p).then(
            (value) => {
              data[index] = value;
              i++;
              if (i === promises.length) {
                resolve(data);
              }
            },
            (reason) => {
              reject(reason);
            }
          );
        });
      });
    };

    /**
     * Promise.race
     */

    static race = function (promises) {
      return new Promise((resolve, reject) => {
        promises.forEach((p) => {
          Promise.resolve(p).then(
            (value) => resolve(value),
            (reason) => reject(reason)
          );
        });
      });
    };
  }
})(window);