前言
异步函数是现代 JavaScript 中的重要概念。在早期，我们通常使用回调函数处理异步操作，但随着时间的推移，这种方式变得越来越难以维护。Promises 帮助我们解决了这个问题。ES8 的 async/await 则使异步操作更为简单。在本文中，我们将学习关于 ES8 async/await 的一切。
ES8 Async/Await 是什么?
async/await 是 Promise 的一种高级表达方式，它简化了 Promise 的编写方式。这种语法使得异步操作的编写变得更为自然而简单，它减少了我们的错误和调试时间。async/await 语法允许我们将异步代码以同步的方式编写，它没有任何阻塞和等待。这种方法使我们的代码更便于理解和维护。async/await 语法使用了 "async" 和 "await" 两个关键字，async 被放置在函数前面，表示该函数将有异步操作，await 则是在调用异步操作时使用的，它将保持代码执行的暂停直到异步操作完成。async 函数总是返回 promises，无论该函数显式返回 promises 或其他值。它允许我们使用 "then" 语法来执行 promises，以使代码更易读。
使用 Async/Await
要使用 async/await，我们首先需要创建一个异步函数。异步函数通常会执行一些操作，例如读取数据或更新服务器上的值。由于异步函数执行可能需要一些时间，我们将不会从该函数立即返回。取而代之，我们返回一个 promises。promises 可以在异步操作完成后通知我们。然后，通过使用 await 表达式，我们可以在异步操作完成之前暂停执行。
下面是一个简单的 async/await 函数示例：
async function getName(repo) {
const response = await fetch(`https://api.github.com/repos/${repo}`);
const data = await response.json();
return data.owner.login;
}
getName('vuejs/vue').then(console.log);如上所述，我们使用 async 关键字来声明一个异步函数 getName。我们调用了内置的 fetch API 来获取一个 GitHub 仓库，并等待其响应。然后，我们在获取到的数据中提取出 owner 属性，并将其返回给调用方。
异常处理
正常情况下，异步函数通常会成功完成，但在某些情况下，它们可能会失败。对于这种情况，我们需要捕获错误并进行适当的处理。在 async 函数内使用 try/catch 语句来捕获异步代码的错误。
对于前面的示例，我们可以添加一个 try/catch 块来处理任何失败的请求：
-- -------------------- ---- -------
----- -------- ------------- -
--- -
----- -------- - ----- ----------------------------------------------
----- ---- - ----- ----------------
------ -----------------
- ----- ------- -
--------------------- -------------------
-
-
---------------------------------------如上所示，我们添加了一个包含 try/catch 的异步函数 getName。当请求失败时（例如请求的数据不存在），我们将在控制台上发出错误消息。
Async/Await 模式
在编写异步代码时，我们遵循一些模式以实现最佳实践。下面是一些常用的模式。
串行执行异步函数
如果需要按顺序执行多个异步函数，我们可以使用 await 来等待上一个函数的完成，然后再执行下一个函数。
-- -------------------- ---- ------- ----- -------- ---------- - ----- ----- - ----- ---------------------------------------------------- ----- ----- - ----- ------------- ----- ----- - ----- -------------------------------------------------------------------------- ----- ----- - ----- ------------- ------------------- - -----------
如上所述，我们使用 await 来等待数据1和数据2函数完成。请注意，这种方式适用于按顺序执行的操作，逐步执行多个异步操作。
并行执行异步函数
在某些情况下，我们可能需要并行执行多个异步函数。在这种情况下，我们创建一个 promises 数组来等待所有 promises 的完成，并使用 Promise.all() 方法将结果合并。
-- -------------------- ---- -------
----- -------- ---------- -
----- -------- - -
----------------------------------------------------
---------------------------------------------------
--
----- --------------- -------------- - ----- ----------------------
----- ----- - ----- ---------------------
----- ----- - ----- ---------------------
------------------ -------
-
-----------如上所述，我们使用了一个 promises 数组来存储获取用户和获取职位的 操作，然后使用 Promise.all() 方法等待所有 promises 的完成。该方法返回一个包含成功结果的数组。我们将数组存储在变量中，然后使用 await 关键字等待结果。
总结
ES8 的 async/await 语法使异步代码的编写变得简单快捷。它使异步操作变得更加标题，更容易管理和维护。我们可以使用 async/await 语句来写出更容易理解和快速完成代码。
在本文中，我们学习了 async/await 的使用方式，以及如何捕获并处理错误。我们还研究了常见的异步模式以及在平行和序列执行函数。
我们有任何问题或问题，在下面的注释中留言，我们将尽力回答。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64643bfe968c7c53b051d02e