在 JavaScript 中正确使用 async/await
JavaScript 已经成为了现代 Web 应用程序开发的主要语言之一。然而，在处理异步操作时，传统的 Promise 的处理方式很容易出现回调地狱。为了解决这个问题，ES2017 中的 async/await 语法被引入进入，这使得异步流程控制变得更加容易。在本文中，我将介绍 async/await 的使用方式，并提供一些示例代码。
原理
async/await 是用于异步函数的关键字。异步函数返回一个 Promise 对象，而 async/await 使得异步代码看起来像是同步代码。
异步函数可以使用 await 暂停其执行，直到返回执行结果的 Promise。await 表达式只能在异步函数内部使用，否则会抛出语法错误。
async/await 语法的使用方式与常规的函数类似。您可以使用 async 关键字来定义异步函数，并在函数体内的任何地方使用 await 关键字来暂停执行，直到 Promise 对象完成。
在 async/await 中，错误处理通常使用 try/catch 块来处理。如果异步函数中的任何一个 Promise 对象被拒绝，那么整个异步函数将被标记为拒绝。可以使用 catch 块来处理已拒绝的 Promise。
异步函数示例
在下面的示例中，我们将使用 fetch 函数来异步获取数据，并在控制台中打印数据。
-- -------------------- ---- -------
----- -------- ------------ -
--- -
----- -------- - ----- -----------
-- ------------- -
----- ---- - ----- ----------------
------------------
- ---- -
--------------------- --- --- ------
-
- ----- ------- -
------------------- -----------
-
-
--------------------------------------------------------在上述示例中，我们定义了一个异步函数 getData，它具有一个 url 参数。我们调用 fetch 函数来获取数据，并使用 await 暂停函数的执行直到数据成功返回。在数据成功返回后，我们解析 JSON，并将结果打印到控制台中。
如果出现错误，我们使用 catch 块来打印错误消息。
Promise.all 示例
在下面的示例中，我们将演示如何使用 Promise.all 在多个异步调用完成后执行代码。在此示例中，我们将使用 fetch 并行请求多个不同的 URL，然后在所有数据都成功返回后打印数据。
-- -------------------- ---- -------
----- -------- --------- -
--- -
----- ---- - -
-----------------------------------------------
-----------------------------------------------
----------------------------------------------
--
----- -------- - ------------ -- ------------
----- --------- - ----- ----------------------
----- ---- - ----- ------------------------------ -- --------------
------------------
- ----- ------- -
------------------- -----------
-
-
----------在上述示例中，我们定义了一个异步函数 getData，它使用 Promise.all 函数并行处理多个 Promise 对象。在执行 Promise.all 后，我们使用 await 暂停函数的执行，直到所有 Promise 都完成，然后解析 JSON 数据并打印结果。
如果出现错误，我们使用 catch 块来打印错误消息。
结论
async/await 是处理异步代码的强大工具。它可以使异步代码看起来像同步代码，并提高了代码的可读性和可维护性。在本文中，我们讨论了 async/await 的原理，并提供了一些示例代码，这些示例代码展示了如何正确地使用 async/await。通过熟练掌握 async/await，您可以更轻松地编写现代 Web 应用程序代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f057f66fbf96019732c04c