异步编程是在 JavaScript 中非常常见的操作，尤其是前端开发中，通过异步编程可以轻松实现 AJAX 请求、定时器、事件监听等复杂的交互操作。ES10 中新增了 async 和 await 语法，进一步提高了异步编程的可读性和易用性，使得开发者可以更容易地编写清晰、可维护的异步代码。
async 和 await 的基础介绍
async 和 await 是两个关键字，它们被称为异步编程的“大杀器”。async 函数定义的是一个异步函数，通过 async 关键字将函数标记为一个异步函数，函数会返回一个 Promise 对象。而 await 关键字则可以将异步操作转换为同步操作，使得代码更加易读易维护。
下面是一个简单的例子，使用传统的 Promise 来实现异步操作：
function fetchData() {
return fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
}
fetchData()使用 async 和 await，代码会变得更加简化：
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- ---------------------------------------------------
----- ---- - ----- ---------------
-----------------
- ----- ------- -
--------------------
-
-
-----------可以看到，使用 async 和 await 可以大大提高异步编程代码的可读性和易用性。
async 和 await 的实践技巧
1. 错误处理
错误处理是任何异步操作中必不可少的，特别是在使用 async 和 await 的情况下。和传统的 Promise 异常捕获一样，async 函数中的错误处理也需要使用 try-catch 语句来捕捉异常，并且在函数中返回一个 Promise 对象。
下面是一个示例代码：
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- ---------------------------------------------------
----- ---- - ----- ---------------
-- ------------ - -- -
-------------------------
- ---- -
----- --- ----------- --- -------
-
- ----- ------- -
--------------------
-
-
-----------2. 并行异步操作
在某些情况下，我们需要同时处理多个异步操作，并且等待它们全部结束后再进行下一步操作。在传统的 Promise 中，我们可以使用 Promise.all() 方法来实现这一点。在 async 函数中，我们也可以使用 await 和 Promise.all() 来实现。
下面是一个示例代码：
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- ------- ------ --------- - ----- -------------
----------------------------------------------------------------- -- -----------------
----------------------------------------------------------------- -- -----------------
-------------------------------------------------------------------- -- ----------------
--
------------------------- ------------- ----------------
- ----- ------- -
--------------------
-
-
-----------3. 串行异步操作
有时候我们需要依次处理多个异步操作，这时候我们可以使用 for...of 循环和 async/await 来实现。
下面是一个示例代码：
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- ---- - -
---------------------------------------------
---------------------------------------------
-----------------------------------------------
--
--- ------ --- -- ----- -
----- -------- - ----- ----------
----- ---- - ----- ---------------
------------------------
-
- ----- ------- -
--------------------
-
-
-----------总结
async 和 await 是一种新的异步编程方式，使得开发者可以更容易地编写清晰、可维护的异步代码。在实践中，我们需要注意错误处理、并行异步操作和串行异步操作等实现技巧，来提高我们的异步编程效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645f480d968c7c53b015559c