前言
ES8 中添加了两个非常重要的关键字 await 和 async。它们可以让 JavaScript 在处理异步代码时更加简单直观，这使得前端开发变得更加容易。本文将介绍这两个关键字的用法，并给出最佳实践，帮助读者掌握它们的使用。
await和async的概念
await
await 是 ES8 中新增的操作符，用于暂停代码的执行，等待一个异步任务完成。当它与 Promise 对象一起使用时，会阻塞代码的执行，直到 Promise 对象返回结果或者抛出异常。
async
async 关键字用于异步函数的定义，返回一个异步结果。异步函数的定义没有改变 JavaScript 异步编程的本质，它仅使异步函数的定义更加简单明了。
使用 await 和 async 的最佳实践
1. 在异步函数中使用 await
异步函数中的每个 await 表达式将会阻塞异步函数的进程，并返回一个 Promise 对象，并在异步操作完成后返回结果。在 try/catch 语句块中使用 await 可以处理操作成功或失败的情况。
----- -------- --------- -
--- -
----- -------- - ----- ------------------------------------------------------
----- ---- - ----- ----------------
------------------
- ----- ------- -
-------------------
-
-2. 在循环中使用 await
在循环中使用 await 强制函数在某个异步操作完成后再进入循环的下一轮。这是在 JavaScript 中使用循环的一个常见问题。在实践中，使用 await 可以使代码更具可读性和简洁性。
----- -------- ------- -
--- ---- - - -- - -- --- ---- -
----- --- --------------- -- ------------------- -------
---------------
-
-3. 在函数调用中使用 await
使用 await 在一个函数调用中等待异步函数的结果，而不是将其嵌套在回调中去处理。这样通过捕捉错误就能简便地避免回调函数嵌套和回调地狱。
----- -------- ----------- - ----- -------- - ----- ------------------------------------------------------ ----- ---- - ----- ---------------- ------ ----- - -- ---- ---------------------------------------------------
4. 利用 Promise.all() 来提高性能
Promise.all() 快速并行执行多个异步任务，能够带来良好的性能提升。它接受一个 Promise 对象数组作为参数，并在所有异步任务完成后返回结果。同时，它会在任何一个异步任务返回错误时返回。Promise.all() 返回一个包含所有异步任务结果的数组。
--- ---- - ------------------------------------------------ ----------------------------------------------- ------------------------------------------------ ----- -------- ----------- - ----- -------- - ------------ -- ------------ ----- --------- - ----- ---------------------- ----- ---- - ----- ---------------------------------- -- ------------------ ------------------ - ---------------------------------
结论
await 和 async 非常好用，你应该尽量在你的代码中利用它们。通过在异步函数中使用 await，在函数调用中使用它们，并借助 Promise.all() 来提高性能，我们可以让 JavaScript 异步编程变得更加容易和简单明了。
其他资源
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67301821eedcc8a97c910d6d