JavaScript 异步 — async/await

学习现代异步编程：Promise、async/await · 难度：高级 · +15XP

JavaScript 异步 — async/await

JavaScript 异步编程 — async/await 详解

学习前的准备

你需要熟悉 JavaScript 的基本语法，了解 Promise 的基本概念（至少知道 .then() 和 .catch() 的用法）。打开浏览器控制台，我们一步步来理解 async/await 如何让异步代码看起来像同步代码一样清晰。

为什么需要 async/await？

在 async/await 出现之前，处理异步操作主要靠回调函数和 Promise 的 .then() 链。当多个异步操作需要按顺序执行时，代码会变得嵌套复杂（常被称为“回调地狱”）。async/await 是 ES2017 引入的语法糖，它基于 Promise，但让异步代码写起来像同步代码一样直观。

function fetchData(id) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ id: id, name: '用户' + id });
    }, 2000);
  });
}
async function getUser() {
  console.log('开始获取...');
  const data = await fetchData(1001);
  console.log('获取到：', data);
  return data;
}
getUser().then(result => console.log('函数返回：', result));
console.log('这行先执行！');

async 关键字

在函数定义前加上 async 关键字，这个函数就变成了异步函数。async 函数总是返回一个 Promise。

async function hello() {
  return '你好世界';
}
hello().then(msg => console.log(msg));  // '你好世界'

await 关键字

await 只能在 async 函数内部使用。它等待一个 Promise 完成，然后返回 Promise 的结果值。

async function loadAll() {
  const [user, config, news] = await Promise.all([
    fetchData(1),
    fetchData(2),
    fetchData(3)
  ]);
  console.log('全部完成：', user, config, news);
}

小结

async/await 让异步代码的逻辑流程一目了然。记住三个要点：async 声明异步函数，await 等待 Promise 结果，try...catch 处理错误。当多个请求之间没有依赖关系时，记得使用 Promise.all() 并行执行来提升性能。