JavaScript 中的异步编程新利器——async/await

2024-02-06 13:41:33

在 JavaScript 中，我们经常会遇到异步操作，比如网络请求、文件读写和定时器等。这些操作需要一段时间才能完成，在等待期间，我们的程序可以继续执行其他任务。

传统的 JavaScript 中，我们使用回调函数来处理异步操作。回调函数是一个在异步操作完成后被调用的函数。例如，以下代码使用回调函数来处理一个网络请求：

function makeRequest(callback) {
  // 发送网络请求
  // ...

  // 当网络请求完成后，调用回调函数
  callback(data);
}

// 使用回调函数来处理网络请求
makeRequest(function(data) {
  // 使用从服务器获取的数据
});

回调函数虽然简单易用，但它也有一个缺点：代码可读性差。当我们使用多个回调函数来处理多个异步操作时，代码很容易变得混乱和难以维护。

为了解决这个问题，ES2017 引入了 async/await 语法。async/await 是一种语法糖，它允许我们使用同步的语法来编写异步代码。例如，以下代码使用 async/await 来处理一个网络请求：

async function makeRequest() {
  // 发送网络请求
  // ...

  // 等待网络请求完成
  const data = await response.json();

  // 使用从服务器获取的数据
  return data;
}

// 使用 `async/await` 来处理网络请求
makeRequest().then(data => {
  // 使用从服务器获取的数据
});

与回调函数相比，async/await 代码更加清晰易读。它允许我们将异步操作写在同一个函数中，并使用 await 来等待异步操作完成。

`async/await` 的使用

要使用 async/await，我们需要先将一个函数标记为 async 函数。async 函数是一个可以包含 await 表达式的函数。

async function myFunction() {
  // 这里可以包含 `await` 表达式
}

在 async 函数中，我们可以使用 await 关键字来等待一个异步操作完成。await 表达式是一个返回 Promise 的表达式。当 await 表达式被执行时，JavaScript 引擎会暂停该 async 函数的执行，直到 Promise 被解析。

async function myFunction() {
  const data = await makeRequest();

  // 使用从服务器获取的数据
}

在上面的代码中，makeRequest() 函数是一个返回 Promise 的函数。当 await makeRequest() 表达式被执行时，JavaScript 引擎会暂停 myFunction() 函数的执行，直到 makeRequest() 函数返回的 Promise 被解析。一旦 makeRequest() 函数返回的 Promise 被解析，myFunction() 函数的执行将继续，并且 data 变量将被赋值为 makeRequest() 函数返回的数据。

`async/await` 与回调函数和 Promise 的比较

async/await 与回调函数和 Promise 都是用于处理异步操作的技术。然而，它们之间也存在一些差异。

可读性： async/await 代码更加清晰易读，因为它允许我们将异步操作写在同一个函数中，并使用 await 关键字来等待异步操作完成。回调函数代码则更加混乱和难以维护，因为它需要将异步操作写在不同的函数中，并且需要使用回调函数来处理异步操作的完成。
可维护性： async/await 代码更加可维护，因为它更容易理解和修改。回调函数代码则更加难以维护，因为它需要理解和修改多个不同的函数。
错误处理： async/await 代码更容易处理错误，因为我们可以使用 try...catch 语句来捕获错误。回调函数代码则更加难以处理错误，因为它需要在每个回调函数中处理错误。

`async/await` 的最佳实践

在使用 async/await 时，我们可以遵循以下最佳实践：

避免在循环中使用 await： 在循环中使用 await 会导致性能问题。如果我们需要在循环中执行异步操作，我们可以使用 Promise.all() 或 async.each() 等库来并行执行异步操作。
避免在 async 函数中使用 await： 在 async 函数中使用 await 会导致死锁。如果我们需要在一个 async 函数中执行另一个 async 函数，我们可以使用 Promise.resolve() 或 await Promise.resolve() 来将另一个 async 函数转换为一个 Promise。
使用 try...catch 语句来处理错误： async/await 代码更容易处理错误，因为我们可以使用 try...catch 语句来捕获错误。如果我们不使用 try...catch 语句来处理错误，错误将会被抛出，并且导致程序崩溃。