精通 JavaScript 中的 Async/Await：异步编程实用指南

2023-01-07 今日头条启辰8

Async/await 是随 ES2017 版本在 JAVAScript 中引入的一种语言功能，可在 JavaScript 中启用异步、非阻塞行为。它建立在promise之上，提供了一种更简单、更清晰的方式来处理异步代码。 Async/await 使得编写看起来和行为都像同步代码的异步代码成为可能，使其更易于阅读和理解。

在这篇博文中，我们将介绍 async/await 的基础知识及其工作原理，以及如何在代码中使用它的一些实际示例。

什么是is Async/Await?

Async/await 是一种处理 JavaScript 中异步代码的语法。它允许您使用 async 和 await 关键字编写看起来和行为都像同步代码的异步代码。

这是 async/await 的一个简单示例：

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

async 关键字表示该函数是异步的并返回一个承诺。 await 关键字用于在继续执行下一行代码之前等待承诺解决。在上面的示例中，await 关键字用于等待 fetch 调用完成以及 response.json() 调用解析。

Async/await 使得编写看起来和行为像同步代码，使其更易于阅读和理解。它还使编写和维护异步代码变得更加容易，因为您不必处理承诺的复杂性。

Async/Await 如何工作？

Async/await建立在 promises 之上，它依赖于 Promise.prototype.then() 方法来处理异步行为。

以下是 async/await 工作原理的分解：

当一个异步函数被调用时，它返回一个承诺。在异步函数内部，您可以使用 await 关键字等待承诺解决。如果承诺解决，则返回承诺的值。如果承诺被拒绝，则会抛出错误。这是一个使用 await 关键字等待承诺解决的异步函数示例：

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

在此示例中，await 关键字用于等待 fetch 调用完成以及 response.json() 调用解析。如果 promise 被拒绝（例如，如果进行 fetch 调用时出错），错误将在 catch 块中捕获并记录到控制台。

使用Async/Await

现在我们对 async/await 的工作原理有了基本的了解，让我们看一些如何在代码中使用它的实际示例。

发出异步 HTTP 请求

async/await 的一个常见用例是发出异步 HTTP 请求。使用 async/await 可以轻松地并行执行多个 HTTP 请求，并在继续执行代码中的下一步之前等待结果。

下面是使用 async/await 并行发出多个 HTTP 请求的示例：

async function getData() {
  const [response1, response2, response3] = await Promise.all([
    fetch('https://api.example.com/data1'),
    fetch('https://api.example.com/data2'),
    fetch('https://api.example.com/data3')
  ]);
  const data1 = await response1.json();
  const data2 = await response2.json();
  const data3 = await response3.json();
  console.log(data1, data2, data3);
}

在此示例中，我们使用 Promise.all() 方法并行发出多个 HTTP 请求。 await 关键字用于在将结果数据记录到控制台之前等待所有承诺完成。

处理错误

使用 async/await 时处理错误很重要，就像处理任何其他异步代码一样。要处理异步函数中的错误，您可以使用 try 和 catch 关键字。

以下是如何处理异步函数中的错误的示例：

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

在此示例中，try 块包含可能引发错误的代码，而 catch 块包含将处理错误的代码。如果在 try 块中抛出错误，它将在 catch 块中捕获并记录到控制台。

链接异步函数

异步函数可以像 promises 一样链接在一起。当您需要按特定顺序执行多个异步操作时，这会很有用。

下面是一个链接异步函数的例子：

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

async function processData(data) {
  // do something with the data
  return processedData;
}

async function displayData() {
  const data = await getData();
  const processedData = await processData(data);
  console.log(processedData);
}

displayData();

在此示例中，我们有三个异步函数：getData、processData 和 displayData。 displayData 函数调用getData 函数并等待其解析，然后再调用processData 函数并等待其解析。然后将生成的处理数据记录到控制台。

Async/Await vs Promises

Async/await 建立在 promises 之上，它提供了一种更简洁、更简单的方法来编写使用 promises 的异步代码。但是，在某些情况下，您可能希望直接使用 promises 而不是 async/await。

直接使用 promises 的原因之一是，如果您需要使用 async/await 无法使用的 Promise API 功能。例如，您可能希望使用 Promise.prototype.finally() 方法在承诺被解决或拒绝后执行代码，而不管结果如何。这对于清理资源或记录承诺的结果很有用。

下面是一个使用带有承诺的 finally() 方法的例子：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // do something with the data
  })
  .catch(error => {
    console.error(error);
  })
  .finally(() => {
    console.log('request complete');
  });

在此示例中，finally() 方法在 promise 被解决或被拒绝后被调用，并将一条消息记录到控制台。

直接使用 promises 的另一个原因是，如果您需要使用不支持 async/await 的旧版浏览器。在这种情况下，您可以使用 polyfill 为旧版浏览器添加对异步/等待的支持。

结论

Async/await 是一种强大的语言特性，可以更轻松地编写和理解 JavaScript 中的异步代码。它建立在 promises 之上，提供了一种更简洁、更容易的方式来处理异步行为。使用 async/await，您可以编写看起来和行为都像同步代码的异步代码，使其更易于阅读和理解。