异步编程的利器：巧用 JavaScript 的 Async 和 Await

2023-10-14 04:37:39

前言

JavaScript 作为一种流行的编程语言，因其灵活性和广泛的应用场景而受到开发者的青睐。但在编写异步代码时，开发者常常需要面对复杂难懂的回调函数。为了解决这个问题，JavaScript 引入了 Async 和 Await ，大大简化了异步编程，让代码更易读、更易维护。本文将通过一些示例，带领读者深入了解 JavaScript 的 Async 和 Await，并掌握它们的用法。

回调函数的局限性

在传统的异步编程中，开发者通常使用回调函数来处理异步操作。回调函数会在被调用后的某一时刻执行，除此之外与其他普通函数并无差别。由于 JavaScript 的异步特征，在一些不能立即获得函数返回值的地方都需要使用回调函数。

但当我们要处理多重异步操作时问题就会凸显出来。假设有下面的应用场景（其中的所有操作都是异步的）：

从服务器端获取用户信息
根据用户信息获取用户订单
根据订单信息计算订单总额

使用回调函数实现上述逻辑可能会导致代码难以阅读和维护。因为我们需要在每个异步操作的回调函数中嵌套其他回调函数，代码结构会变得非常混乱。

Async 和 Await 的出现

为了解决回调函数的局限性，JavaScript 引入了 Async 和 Await 关键字。Async 关键字可以将一个函数标记为异步函数，而 Await 关键字可以等待一个异步操作的完成。

使用 Async 和 Await 重写上述代码：

async function getUserInfo() {
  const response = await fetch('/user-info');
  const data = await response.json();
  return data;
}

async function getUserOrders(userId) {
  const response = await fetch(`/user-orders/${userId}`);
  const data = await response.json();
  return data;
}

async function calculateOrderTotal(orders) {
  let total = 0;
  for (const order of orders) {
    total += order.price;
  }
  return total;
}

async function main() {
  const userInfo = await getUserInfo();
  const userOrders = await getUserOrders(userInfo.id);
  const orderTotal = await calculateOrderTotal(userOrders);
  console.log(`Order total: ${orderTotal}`);
}

main();