JavaScript 中 await 和 async：深入解析、实践与实战

2023-10-08 22:49:02

揭开 await 和 async 的真面目：你不应该错过的高级教程

如今，异步编程已成为构建现代 Web 应用程序不可或缺的一部分。它使我们能够在不阻塞主线程的情况下执行长时间运行的任务，从而提供流畅的交互式体验。JavaScript 中的 await 和 async 关键词是实现异步编程的强大工具，掌握它们对于提升代码质量和开发效率至关重要。

认识 await 和 async

await 和 async 是 ES7 引入的语法糖，专门用于处理异步代码。

async ：将函数标记为异步函数。异步函数可以包含 await 表达式。
await ：暂停异步函数的执行，直到相关的承诺被解决。

如何使用 await 和 async

要使用 await 和 async，只需遵循以下步骤：

创建一个异步函数并用 async 标记它。
在异步函数中使用 await 关键字暂停执行，等待承诺解决。
await 后面必须紧跟一个返回承诺的表达式。

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

await 和 async 的好处

使用 await 和 async 带来了许多好处：

可读性增强 ：await 和 async 使异步代码更易于阅读和理解，就像在处理同步代码一样。
错误处理简化 ：await 将承诺的拒绝转换为异常，简化了错误处理。
代码组织性 ：异步函数可以将长时间运行的任务封装在一个模块中，从而提高代码组织性和可维护性。

实战案例

以下是一个使用 await 和 async 构建简单 API 调用函数的示例：

async function fetchUserData(userId) {
  try {
    const response = await fetch(`https://example.com/api/users/${userId}`);
    if (!response.ok) {
      throw new Error('Error fetching user data');
    }
    return response.json();
  } catch (error) {
    console.error('Error fetching user data:', error);
    return null;
  }
}