js async实现

Async/Await 实现原理

Async/await 是 JavaScript 中处理异步操作的语法糖，底层基于 Promise 和 Generator 实现。其核心是将异步代码写成同步形式，但实际执行仍是非阻塞的。

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

Promise 基础实现

Async/await 本质是 Promise 的封装。以下代码展示如何用 Promise 实现类似功能：

function fetchData() {
  return fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => data);
}

Generator 模拟 Async

通过 Generator 可以手动实现类似 async/await 的控制流：

function runGenerator(generatorFunc) {
  const generator = generatorFunc();

  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());
}

function* fetchData() {
  const response = yield fetch('https://api.example.com/data');
  const data = yield response.json();
  return data;
}

runGenerator(fetchData);

错误处理机制

Async/await 的错误处理可以通过 try/catch 实现：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    return await response.json();
  } catch (error) {
    console.error('Fetch failed:', error);
    throw error;
  }
}

并行执行优化

多个独立异步操作可用 Promise.all 并行执行：

async function fetchMultiple() {
  const [user, posts] = await Promise.all([
    fetch('/user'),
    fetch('/posts')
  ]);
  return {
    user: await user.json(),
    posts: await posts.json()
  };
}

底层转换示例

Babel 等工具会将 async/await 转换为 ES5 兼容代码。以下是简化后的转换逻辑：

function _asyncToGenerator(fn) {
  return function() {
    const self = this;
    const args = arguments;
    return new Promise((resolve, reject) => {
      const gen = fn.apply(self, args);

      function step(key, arg) {
        let info, value;
        try {
          info = gen[key](arg);
          value = info.value;
        } catch (error) {
          reject(error);
          return;
        }
        if (info.done) {
          resolve(value);
        } else {
          Promise.resolve(value).then(
            v => step("next", v),
            e => step("throw", e)
          );
        }
      }

      step("next");
    });
  };
}