当前位置：首页 > JavaScript

js实现async

2026-04-05 17:30:30JavaScript

使用 Promise 实现 async/await

在 JavaScript 中，async/await 是建立在 Promise 之上的语法糖。可以通过 Promise 和生成器函数模拟 async/await 的行为。

function asyncGenerator(generatorFunc) {
  return function (...args) {
    const generator = generatorFunc(...args);
    function handle(result) {
      if (result.done) return Promise.resolve(result.value);
      return Promise.resolve(result.value)
        .then(res => handle(generator.next(res)))
        .catch(err => handle(generator.throw(err)));
    }
    return handle(generator.next());
  };
}

示例用法

定义一个生成器函数并使用 asyncGenerator 包装：

js实现async

const fetchData = () => new Promise(resolve => setTimeout(() => resolve('Data fetched'), 1000));

const asyncFunc = asyncGenerator(function* () {
  try {
    const data = yield fetchData();
    console.log(data); // 输出: Data fetched
    return data;
  } catch (error) {
    console.error(error);
  }
});

asyncFunc();

手动实现 async/await 的核心逻辑

生成器函数：使用 function* 定义生成器函数，通过 yield 暂停执行。
递归处理：通过递归或循环处理生成器的每一步，将 Promise 的结果传递回生成器。
错误处理：捕获 Promise 的异常并通过 generator.throw 抛出。

完整实现

function asyncify(generatorFunc) {
  return function (...args) {
    const generator = generatorFunc(...args);

    const step = (nextValue, isError = false) => {
      const result = isError ? generator.throw(nextValue) : generator.next(nextValue);

      if (result.done) {
        return Promise.resolve(result.value);
      }

      return Promise.resolve(result.value)
        .then(value => step(value))
        .catch(error => step(error, true));
    };

    return step();
  };
}