自定义实现JavaScript中的Promise

目录

    • 浏览器兼容性
    • 自定义Promise实现
    • 参考

Promise是JavaScript ES6规范中的一个重要对象,可以方便地实现各种异步操作。

浏览器兼容性

以下是各种浏览器对Promise的支持情况:
自定义实现JavaScript中的Promise_第1张图片
对于不支持Promise的浏览器我们可以自定义Promise实现,将其作为原生Promise的Polyfill。

自定义Promise实现

以下是自定义实现的Promise:

/**
 * 自定义实现Promise
 * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise
 *
 * 核心:
 * promise的resolve()或reject()执行,表示status状态变化,并将结果作为入参触发watcher的onFullfill()或onReject()方法
 *
 * 逻辑:
 * 1. promise的状态是外部通过调用executor中的resolve()和reject()方法实现的
 * 2. 当调用resolve()的时候,promise的状态从pending变成fullfilled,并执行通过.then()监听fullfilled状态的回调,且resovle()传入的结果会作为onFullfill()回调的入参
 * 3. 当调用reject()的时候,promise的状态从pending变成rejected,并执行通过.then()监听rejected状态的回调,且reject()传入的错误会作为onReject()回调的入参
 *
 * case分析:
 * p1.then(p1OnFullfilled, p1OnReject) => p2
 * 1. p1OnFullfilled执行
 *  1.1 该方法的返回值是Promise,该Promise是一个新的Promise p3,不是p2,当这个新的Promise执行resovle()时,其resolve()传入的结果会作为p2的onFullfill()的回调入参
 *  1.2 该方法的返回值不是Promise,该值作为入参触发p2._resolve()执行
 * 2. p1OnReject执行
 *  2.1 该方法内部通过throw抛出异常,该异常作为入参触发执行p2._reject()执行
 *  2.2 该方法内部没有抛出异常,则执行p2的onFullfill()回调,且返回值会作为p2的onFullfill()的回调参数
 *
 * @param executor function,Required,其签名格式为function(resolve, reject)。
 * executor是带有 resolve 和 reject 两个参数的函数。
 * Promise构造函数执行时立即调用executor 函数,resolve 和 reject 两个函数作为参数传递给executor(executor 函数在Promise构造函数返回所建promise实例对象前被调用)。
 * resolve 和 reject 函数被调用时,分别将promise的状态改为fulfilled(完成)或rejected(失败)。
 * executor 内部通常会执行一些异步操作,一旦异步操作执行完毕(可能成功/失败),要么调用resolve函数来将promise状态改成fulfilled,要么调用reject 函数将promise的状态改为rejected。
 * 如果在executor函数中抛出一个错误,那么该promise 状态为rejected。executor函数的返回值被忽略。
 */
function MyPromise(executor) {
  this._status = 0; // 0表示pending,1表示fullfilled,-1表示rejected
  this._result = undefined; // resolve()执行的入参
  this._err = null; // reject()执行的入参

  // watcher是通过then来观察结果的Promise,由于可以通过多次调用p1.then()来得到多个新的Promise,所以此处是watcher数组
  this._watchers = [];


  /**
   * 封装传递给executor()的resolve()方法
   * 逻辑:
   * 1. 更改当前promise的status,并记录result
   * 2. 通知watchers结果
   *
   * @parma result Any,Optional,Promise的resovle的结果值
   */
  this._resolve = (result) => {
    // Promise已经resolved或rejected,不能再次resolve
    if (this._status !== 0) {
      return;
    }

    this._status = 1;
    this._result = result;

    for (const watcher of this._watchers) {
      this._notifyWatcher(watcher);
    }
  };


  /**
   * 封装传递给executor()的reject()方法
   * 逻辑:
   * 1. 更改当前promise的status,并记录error
   * 2. 通知watchers错误
   *
   * @param err Any,Optional,Promise的reject的原因
   */
  this._reject = (err) => {
    // Promise已经resolved或rejected,不能再次reject
    if (this._status !== 0) {
      return;
    }

    this._status = -1;
    this._err = err;

    for (const watcher of this._watchers) {
      this._notifyWatcher(watcher);
    }
  };

  try {
    executor.call(this, this._resolve, this._reject);
  } catch (e) {
    this._reject(e);
  }
}

/**
 * 内部私有方法,用于向当前promise中添加一个watcher以监听当点promise的resolve()或reject()的结果
 *
 * @param watcher MyPromise,Required,监听当前promise的resolve()或reject()结果的观察者Promise对象
 */
MyPromise.prototype._addWatcher = function(watcher) {
  if (this._watchers.indexOf(watcher) < 0) {
    this._watchers.push(watcher);
  }

  if (this._status !== 0) {
    // 已经resolved或rejected
    this._notifyWatcher(watcher);
  }
};

/**
 * 内部私有方法,用于将当前promise的resolve()或reject()的结果通知观察者
 *
 * @param watcher MyPromise,Required,监听当前promise的resolve()或reject()结果的观察者Promise对象
 */
MyPromise.prototype._notifyWatcher = function(watcher) {
  if (this._watchers.includes(watcher)) {
    if (this._status > 0) {
      // 已经fullfilled
      setTimeout(() => {
        this._removeWatcher(watcher);
        watcher._onPrentResolve(this._result);
      }, 0);
    } else if (this._status < 0) {
      // 已经rejected
      setTimeout(() => {
        this._removeWatcher(watcher);
        watcher._onParentReject(this._err);
      }, 0);
    }
  }
};

/**
 * 内部私有方法,用于将监听当前promise的resolve()或reject()的观察者从观察者列表中删除
 *
 * @param watcher MyPromise,Required,监听当前promise的resolve()或reject()结果的观察者Promise对象
 */
MyPromise.prototype._removeWatcher = function(watcher) {
  const index = this._watchers.indexOf(watcher);
  if (index >= 0) {
    this._watchers.splice(index, 1);
  }
};

/**
 * 功能:
 * then() 方法返回一个 Promise。它最多需要有两个参数:Promise 的成功和失败情况的回调函数。
 * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/then
 *
 * 逻辑:
 * promise1.then()方法需要返回一个新的Promise对象promise2
 *
 * @param onPromise1Resolve function,Optional,当 Promise 变成接受状态(fulfilled)时调用的函数。
 * 该函数有一个参数,即接受的最终结果(the fulfillment  value)。
 * 如果该参数不是函数,则会在内部被替换为 (x) => x,即原样返回 promise 最终结果的函数。
 *
 * @param onPromise1Reject function,Optional,当 Promise 变成拒绝状态(rejected)时调用的函数。
 * 该函数有一个参数,即拒绝的原因(rejection reason)。
 * 如果该参数不是函数,则会在内部被替换为一个 "Thrower" 函数 (it throws an error it received as argument)。
 *
 * @return MyPromise,返回新的Promise对象,具体的返回值依据以下规则返回。如果 then 中的回调函数:
 * 返回了一个值,那么 then 返回的 Promise 将会成为接受状态,并且将返回的值作为接受状态的回调函数的参数值。
 * 没有返回任何值,那么 then 返回的 Promise 将会成为接受状态,并且该接受状态的回调函数的参数值为 undefined。
 * 抛出一个错误,那么 then 返回的 Promise 将会成为拒绝状态,并且将抛出的错误作为拒绝状态的回调函数的参数值。
 * 返回一个已经是接受状态的 Promise,那么 then 返回的 Promise 也会成为接受状态,并且将那个 Promise 的接受状态的回调函数的参数值作为该被返回的Promise的接受状态回调函数的参数值。
 * 返回一个已经是拒绝状态的 Promise,那么 then 返回的 Promise 也会成为拒绝状态,并且将那个 Promise 的拒绝状态的回调函数的参数值作为该被返回的Promise的拒绝状态回调函数的参数值。
 * 返回一个未定状态(pending)的 Promise,那么 then 返回 Promise 的状态也是未定的,并且它的终态与那个 Promise 的终态相同;同时,它变为终态时调用的回调函数参数与那个 Promise 变为终态时的回调函数的参数是相同的。
 */
MyPromise.prototype.then = function(onPromise1Resolve, onPromise1Reject) {
  const promise1 = this;

  const promise2 = new MyPromise(function(resolve, reject) {
    // 此处的this执行新的Promise p
    this._onPrentResolve = function(promise1Result) {
      let value = undefined;

      // 如果未设置onPromise1Resolve,则直接将promise2进行resolve(promise1Result)
      if (!onPromise1Resolve) {
        resolve(promise1Result);
        return;
      }

      try {
        // 执行promise1的resovle之后的回调方法onPromise1Resolve()
        value = onPromise1Resolve(promise1Result);
      } catch (e) {
        // 如果onPromise1Resolve()方法执行异常,则将对promise2执行reject()
        reject(e);
        return;
      }

      if (value instanceof MyPromise) {
        // 返回了一个新的Promise对象promise3
        const promise3 = value;

        // promise2需要等待新的Promise执行完成才能resolve或reject
        // 首先覆写promise2._onPrentResolve和promise2._onParentReject方法以便接受promise3执行resolve、reject时的数据
        this._onPrentResolve = function(promise3Result) {
          resolve(promise3Result);
        };

        this._onParentReject = function(promise3Err) {
          reject(promise3Err);
        };

        // 使得promise2观察promise3的状态
        promise3._addWatcher(this); // this是promise2
      } else {
        resolve(value);
      }
    };

    this._onParentReject = function(promise1Err) {
      let value = undefined;

      // 如果未设置onPromise1Reject,则直接将promise2进行reject(promise1Err)
      if (!onPromise1Reject) {
        reject(promise1Err);
        return;
      }

      try {
        // 执行promise1的reject之后的回调方法onPromise1Reject()
        value = onPromise1Reject(promise1Err);
      } catch(e) {
        // 如果onPromise1Reject()方法执行异常,则将对promise2执行reject()
        reject(e);
        return;
      }

      if (value instanceof MyPromise) {
        // 返回了一个新的Promise对象promise3
        const promise3 = value;

        // promise2需要等待新的Promise执行完成才能resolve或reject
        // 首先覆写promise2._onPrentResolve和promise2._onParentReject方法以便接受promise3执行resolve、reject时的数据
        this._onPrentResolve = function(promise3Result) {
          resolve(promise3Result);
        };

        this._onParentReject = function(promise3Err) {
          reject(promise3Err);
        };

        // 使得promise2观察promise3的状态
        promise3._addWatcher(this); // this是promise2
      } else {
        resolve(value);
      }
    };

	// 使得promise2观察promise1的状态
    promise1._addWatcher(this); // this是promise2
  });

  return promise2;
};

/**
 * 功能:
 * catch() 方法返回一个Promise,并且处理拒绝的情况。它的行为与调用Promise.prototype.then(undefined, onRejected) 相同。
 * (事实上, obj.catch(onRejected) 内部实现就是调用 obj.then(undefined, onRejected))
 * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch
 *
 * 逻辑:
 * 1. 对于p1.then(onResolve, onReject),onResolve中出现异常时,onReject不会捕获
 * 2. 对于p1.then(onResolve).catch(onCatch),onResolve中出现异常时,onCatch会捕获
 * 3. 对于p1.then(onResolve, onReject).catch(onCatch),onResolve中出现异常时,onReject不会捕获,onCatch会捕获
 * 4. 对于p1.then(onResolve, onReject).catch(onCatch),onReject中出现异常时,onCatch会捕获
 *
 * @return MyPromise,返回新的Promise对象
 */
MyPromise.prototype.catch = function(onCatch) {
  return this.then(null, onCatch);
};

/**
 * 功能:
 * finally() 方法返回一个Promise。在promise结束时,无论结果是fulfilled或者是rejected,都会执行指定的回调函数。
 * 这为在Promise是否成功完成后都需要执行的代码提供了一种方式。这避免了同样的语句需要在then()和catch()中各写一次的情况。
 * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally
 *
 * 逻辑:
 * finally() 虽然与 .then(onFinally, onFinally) 类似,它们不同的是:
 * 调用内联函数时,不需要多次声明该函数或为该函数创建一个变量保存它。
 * 由于无法知道promise的最终状态,所以finally的回调函数中不接收任何参数,它仅用于无论最终结果如何都要执行的情况。
 * 与Promise.resolve(2).then(() => {}, () => {}) (resolved的结果为undefined)不同,Promise.resolve(2).finally(() => {}) resolved的结果为 2。
 * 同样,Promise.reject(3).then(() => {}, () => {}) (resolved 的结果为undefined), Promise.reject(3).finally(() => {}) rejected 的结果为 3。
 *
 * @return MyPromise,返回新的Promise对象
 */
MyPromise.prototype.finally = function(onFinally) {
  const onParentResolve = function(result) {
    // 忽略onFinally()的执行结果
    onFinally();

    // 将之前promise的结果透传
    return result;
  };

  const onParentReject = function(err) {
    // 忽略onFinally()的执行结果
    onFinally();

    // 将之前promise的错误透传
    throw err;
  };

  return this.then(onParentResolve, onParentReject);
};

/**
 * 功能:
 * Promise.resolve(value)方法返回一个以给定值解析后的Promise 对象。
 * 如果这个值是一个 promise,那么将返回这个promise;
 * 如果这个值是thenable(即带有"then" 方法),返回的promise会“跟随”这个thenable的对象,采用它的最终状态;
 * 否则返回的promise将以此值完成。此函数将类promise对象的多层嵌套展平。
 * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve
 *
 * @param value Any,Optional,将被Promise对象解析的参数,也可以是一个Promise对象,或者是一个thenable。
 *
 * @return MyPromise,返回一个带着给定值解析过的Promise对象,如果参数本身就是一个Promise对象,则直接返回这个Promise对象。
 */
MyPromise.resolve = function(value) {
  if (value instanceof MyPromise) {
    return value;
  } else {
    return new MyPromise(function(resolve) {
      resolve(value);
    });
  }
};

/**
 * Promise.reject()方法返回一个带有拒绝原因的Promise对象。
 * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject
 *
 * @param reason Any,Optional,表示Promise被拒绝的原因。
 *
 * @retrun MyPromise,返回一个给定原因了的被拒绝的Promise。
 */
MyPromise.reject = function(reason) {
  return new MyPromise(function(resolve, reject) {
    reject(reason);
  });
};

/**
 * Promise.all(iterable) 方法返回一个 Promise 实例,此实例在 iterable 参数内所有的 promise 都“完成(resolved)”或参数中不包含 promise 时回调完成(resolve);
 * 如果参数中  promise 有一个失败(rejected),此实例回调失败(reject),失败原因的是第一个失败 promise 的结果。
 * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
 *
 * @param iterable Iterable,Required,一个可迭代对象,如Array。
 *
 * @return MyPromise,返回一个Promise对象。
 * 如果传入的参数是一个空的可迭代对象,则返回一个已完成(already resolved)状态的 Promise。
 * 如果传入的参数不包含任何 promise,则返回一个异步完成(asynchronously resolved) Promise。注意:Google Chrome 58 在这种情况下返回一个已完成(already resolved)状态的 Promise。
 * 其它情况下返回一个处理中(pending)的Promise。这个返回的 promise 之后会在所有的 promise 都完成或有一个 promise 失败时异步地变为完成或失败。 返回值将会按照参数内的 promise 顺序排列,而不是由调用 promise 的完成顺序决定。
 */
MyPromise.all = function(iterable) {
  return new MyPromise(function(resolve, reject) {
    const that = this;

    if (iterable.length === 0) {
      // 如果传入的参数是一个空的可迭代对象,则返回一个已完成(already resolved)状态的 Promise。
      resolve([]);
    } else {

      const promises = iterable.map(item => {
        if (item instanceof MyPromise) {
          return item;
        } else {
          // 将非MyPromise实例的值封装成resolved的Promise
          return MyPromise.resolve(item);
        }
      });

      const allCount = promises.length;

      const resultsObj = {}; // {index: value}

      function handleResolve(index, result) {
        // 如果promise已经resolved或rejected,则不再继续后续逻辑
        if (that._status !== 0) {
          return;
        }

        resultsObj[index] = result;

        const keys = Object.keys(resultsObj);

        if (keys.length === allCount) {
          // 所有promises都已经处理完成
          const results = [];

          keys.forEach(key => {
            const value = resultsObj[key];
            const index = parseInt(key);
            results[index] = value;
          });

          resolve(results);
        }
      }

      function handleReject(err) {
        // 如果promise已经resolved或rejected,则不再继续后续逻辑
        if (that._status !== 0) {
          return;
        }

        reject(err);
      }

      promises.forEach((promise, index) => {
        promise.then(function(result) {
          handleResolve(index, result);
        }, function(err) {
          handleReject(err);
        });
      });
    }
  });
};

/**
 * Promise.race(iterable) 方法返回一个 promise,一旦迭代器中的某个promise解决或拒绝,返回的 promise就会解决或拒绝。
 * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/race
 *
 * 逻辑:
 * race 函数返回一个 Promise,它将与第一个传递的 promise 相同的完成方式被完成。它可以是完成( resolves),也可以是失败(rejects),这要取决于第一个完成的方式是两个中的哪个。
 * 如果迭代iterable是空的,则返回的 promise 将永远等待。
 * 如果迭代iterable中包含非Promise值、已经resolved的Promise对象、已经rejected的Promise对象, 则 Promise.race() 将解析为迭代iterable中找到的第一个值。
 *
 * @param iterable Iterable,Required,一个可迭代对象,如Array。
 *
 * @return MyPromise,返回一个Promise对象。只要给定的迭代iterable中的一个promise解决或拒绝,就采用第一个promise的值作为它的值,从而异步地解析或拒绝(一旦堆栈为空)。
 *
 */
MyPromise.race = function(iterable) {
  return new MyPromise(function(resolve, reject) {
    // 如果迭代iterable是空的,则返回的 promise 将永远等待。
    if (iterable.length === 0) {
      return;
    }

    iterable.map(item => {
      if (item instanceof MyPromise) {
        item.then((result) => {
          if (this._status === 0) {
            resolve(result);
          }
        }, (err) => {
          if (this._status === 0) {
            reject(err)
          }
        });
      } else {
      	if (this._status === 0) {
      	  resolve(item);
      	}
      }
    });
  });
};

通过以下方式将其作为Promise Polyfill使用:

  <script type="text/javascript" src="promise-polyfill.js"></script>
  <script type="text/javascript">
    if (!window.Promise) {
      window.Promise = MyPromise;
    }
  </script>

参考

MDN - 使用 Promise
MDN - Promise

你可能感兴趣的:(Web)