异步编程一直是前端开发中的一个难点。ES6 中的引入 Promise 已经让异步编程变得更加简单和直观，但是还是存在一些问题，比如回调函数嵌套，代码难以维护等。在 ES8 中，Async / Await 这一新特性解决了这些问题，让异步编程更加容易。
Async / Await 是什么
Async / Await 本质上是基于 Promise 的一种实现，它通过使用 async 和 await 关键字来编写异步代码。Async / Await 让异步代码看起来像同步代码，这让代码的可读性和可维护性都得到了很大的提升。
使用 Async / Await
- 定义 async 函数
async 函数定义为 async function，并且它总是返回一个 Promise 对象。
async function fetchData() {
// 异步请求数据
const response = await fetch("https://api.example.com/data");
const data = await response.json();
return data;
}- 使用 await 关键字
在 async 函数内部，可以通过 await 关键字来等待一个 Promise 成功，然后获取 Promise 的返回值。
async function fetchData() {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
return data;
}在上面的代码中，fetch 方法返回了一个 Promise 对象，我们用 await 等待 Promise 成功后，才能获取到 response 对象。同理，我们用 await 等待 response.json() 方法成功，才能获取到 data 数据。
- 异常处理
在 async 函数中，可以使用 try / catch 来捕获 Promise 中的错误。
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
---------------------
-
-代码示例
下面的示例代码演示了如何在一个页面中通过 Async / Await 来获取三个不同的接口数据，并在获取所有数据之后统一处理。
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- ------- ------ --------- - ----- -------------
---------------------------------------
---------------------------------------
------------------------------------------
---
----- -------- - ----- -------------
----- -------- - ----- -------------
----- ----------- - ----- ----------------
------ ---------- --------- -------------
- ----- ------- -
---------------------
-
-
----- -------- ------------ -
----- ---------- --------- ------------ - ----- ------------
-- ---------
--------------------- --------- -------------
-总结
Async / Await 是一个非常有用的特性，可以让异步编程变得更加容易而直观。使用 Async / Await 可以避免回调函数嵌套和提升代码的可读性和可维护性。当然，异步编程的经验和技巧同样也很重要，只有在掌握基本概念的前提下，才能够充分利用 Async / Await。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a3da2badd4f0e0ffc06cea