Promise与async awit底层实现及原理

在 JavaScript 中，Promise 和 async/await 是处理异步操作的两种主要方式。async/await 是基于 Promise 的语法糖，使得异步代码的书写更加简洁和直观。理解它们的底层实现有助于更好地掌握异步编程。

Promise 的实现原理

Promise 是一种用于表示异步操作最终完成或失败的对象。它的核心思想是将异步操作封装为一个对象，该对象可以注册回调函数，以便在操作成功（resolved）或失败（rejected）时执行相应的处理。

一个 Promise 对象有以下状态：

• pending：初始状态，既不是成功，也不是失败。
• fulfilled：操作成功完成。
• rejected：操作失败。

在创建 Promise 时，需要传入一个执行器函数，该函数接收两个参数：resolve 和 reject。在异步操作成功时调用 resolve，失败时调用 reject。

以下是一个简单的 Promise 实现示例：

function myPromise(executor) {
  let onResolve;
  let onReject;
  let fulfilled = false;
  let rejected = false;
  let called = false;
  let value;

  function resolve(val) {
    fulfilled = true;
    value = val;
    if (typeof onResolve === 'function') {
      onResolve(value);
      called = true;
    }
  }

  function reject(err) {
    rejected = true;
    value = err;
    if (typeof onReject === 'function') {
      onReject(value);
      called = true;
    }
  }

  this.then = function (callback) {
    onResolve = callback;
    if (fulfilled && !called) {
      onResolve(value);
      called = true;
    }
    return this;
  };

  this.catch = function (callback) {
    onReject = callback;
    if (rejected && !called) {
      onReject(value);
      called = true;
    }
    return this;
  };

  executor(resolve, reject);
}

在上述实现中，myPromise 构造函数接收一个执行器函数 executor，并定义了 resolve 和 reject 函数来更新状态和存储结果。then 和 catch 方法用于注册成功和失败的回调函数。

async/await 的实现原理

async/await 是基于 Promise 的语法糖，使得异步代码看起来像同步代码。async 函数返回一个 Promise 对象，await 表达式用于等待一个 Promise 完成。

async/await 的底层实现可以类比于生成器（Generator）函数和自动执行器。生成器函数可以在执行过程中暂停和恢复，这为实现异步流程控制提供了可能。

以下是一个使用生成器和自动执行器模拟 async/await 的示例：

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
  try {
    var info = gen[key](arg);
    var value = info.value;
  } catch (error) {
    reject(error);
    return;
  }
  if (info.done) {
    resolve(value);
  } else {
    Promise.resolve(value).then(_next, _throw);
  }
}

function _asyncToGenerator(fn) {
  return function () {
    var self = this,
      args = arguments;
    return new Promise(function (resolve, reject) {
      var gen = fn.apply(self, args);
      function _next(value) {
        asyncGeneratorStep(gen, resolve, reject, _next, _throw, 'next', value);
      }
      function _throw(err) {
        asyncGeneratorStep(gen, resolve, reject, _next, _throw, 'throw', err);
      }
      _next(undefined);
    });
  };
}

// 示例异步函数
const asyncFunction = _asyncToGenerator(function* () {
  const result = yield new Promise((resolve) => setTimeout(() => resolve('done'), 1000));
  console.log(result);
});

asyncFunction();

在上述代码中，_asyncToGenerator 函数接受一个生成器函数作为参数，返回一个新的函数。调用该函数时，会返回一个 Promise，并自动执行生成器函数，处理 yield 表达式返回的 Promise。这与 async/await 的行为类似。

需要注意的是，实际的 async/await 实现比上述示例更复杂，涉及更多的边界情况处理和性能优化。

通过理解 Promise 和 async/await 的底层实现，可以更深入地掌握 JavaScript 的异步编程模型，有助于编写更高效和可靠的代码。