跳至主要內容

Async/Await 异步函数

2025/8/24大约 4 分钟

Async/Await 异步函数

Async/Await是ES2017（ES8）引入的异步编程语法糖，基于Promise，让异步代码看起来更像同步代码，大大提高了异步代码的可读性和可维护性。

设计目标与核心价值

Async/Await的主要设计目标是：

  • 简化基于Promise的异步代码
  • 使异步代码更易于阅读和理解
  • 解决Promise链（Promise chain）过长的问题
  • 提供更直观的错误处理方式

基本概念与语法

Async/Await由两个关键字组成：

  • async：用于声明一个异步函数，该函数返回一个Promise
  • await：用于等待一个Promise对象的解析结果，只能在async函数中使用

基本用法

// 定义一个异步函数
async function fetchData() {
  // 等待Promise解析
  const response = await fetch('/api/data');
  const data = await response.json();
  return data;
}

// 调用异步函数
fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

异步函数的特性

1. 返回值

异步函数始终返回一个Promise对象：

async function myFunction() {
  return 'Hello';
}

console.log(myFunction()); // 输出: Promise { 'Hello' }

myFunction().then(value => console.log(value)); // 输出: Hello

2. await 表达式

await 表达式会暂停异步函数的执行，等待Promise解析完成后继续执行：

async function timer() {
  console.log('开始');
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log('1秒后');
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log('2秒后');
}

timer(); // 依次输出: 开始, 1秒后, 2秒后

3. 错误处理

可以使用try/catch来处理异步函数中的错误：

async function fetchData() {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) {
      throw new Error('请求失败');
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('获取数据失败:', error);
    throw error; // 可以选择重新抛出错误
  }
}

应用场景

Async/Await在以下场景中特别有用：

1. 串行执行异步操作

async function fetchData() {
  const user = await fetchUser();
  const posts = await fetchPostsByUser(user.id);
  const comments = await fetchCommentsByPost(posts[0].id);
  return { user, posts, comments };
}

2. 并行执行异步操作

async function fetchData() {
  // 同时开始多个异步操作
  const userPromise = fetchUser();
  const postsPromise = fetchPosts();
  const commentsPromise = fetchComments();

  // 等待所有操作完成
  const user = await userPromise;
  const posts = await postsPromise;
  const comments = await commentsPromise;

  return { user, posts, comments };
}

3. 与Promise.all结合

async function fetchData() {
  const [user, posts, comments] = await Promise.all([
    fetchUser(),
    fetchPosts(),
    fetchComments()
  ]);
  return { user, posts, comments };
}

4. 处理条件异步操作

async function fetchData(needPosts) {
  const user = await fetchUser();
  let posts = null;

  if (needPosts) {
    posts = await fetchPostsByUser(user.id);
  }

  return { user, posts };
}

注意事项与最佳实践

  1. 错误处理：始终使用try/catch来处理异步函数中的错误，或在调用异步函数时使用catch方法

  2. 避免阻塞：不要在非异步函数中使用await，这会导致语法错误

  3. 并行执行：对于相互独立的异步操作，应尽量并行执行以提高性能

  4. 避免过度使用：对于简单的异步操作，直接使用Promise可能更简洁

  5. 兼容性：Async/Await在现代浏览器和Node.js中得到广泛支持，但在旧环境中需要Babel转译

  6. 调试：使用async/await的代码更容易调试，可以像同步代码一样设置断点

与其他异步模式的比较

模式优点缺点
回调函数简单、直接嵌套层级过深（回调地狱）、难以维护
Promise链式调用、更好的错误处理链过长时仍然不够直观
Async/Await代码清晰、易于理解、更好的错误处理需要理解Promise、只能在异步函数中使用

高级用法

1. 异步迭代器

结合for...of循环和async/await，可以方便地迭代异步数据流：

async function processItems(items) {
  for await (const item of items) {
    await processItem(item);
  }
}

2. 异步生成器

async function* generateItems() {
  yield await fetchItem(1);
  yield await fetchItem(2);
  yield await fetchItem(3);
}

async function processItems() {
  for await (const item of generateItems()) {
    console.log(item);
  }
}

3. 顶层await

ES2022引入了顶层await，允许在模块顶层使用await，而不需要包裹在async函数中：

// 模块顶层
const data = await fetchData();
console.log(data);

export default data;

总结

Async/Await是JavaScript异步编程的重大进步，它基于Promise，提供了更直观、更简洁的异步代码编写方式。通过async和await关键字，我们可以编写看起来像同步代码的异步代码，大大提高了代码的可读性和可维护性。

Async/Await适用于各种异步场景，包括串行和并行执行异步操作、处理条件异步操作等。在使用时，需要注意错误处理、并行执行优化以及兼容性等问题。

随着JavaScript的不断发展，Async/Await已经成为异步编程的主流方式，被广泛应用于前端框架、Node.js服务端开发等领域。

默认页脚