什么是 async 和 await
async 和 await 是 ECMAScript 2017 (ES7) 中的一个新特性，它们为 JavaScript 中的异步编程提供了一种更优雅的解决方案。
- async 是用来定义一个异步函数的关键字。
- await 是用来等待一个异步操作完成，并返回它的结果。
在过去，我们通常使用回调函数或者 Promise 来处理异步操作。但是，回调函数的嵌套容易让代码变得难以维护，而 Promise 的 then() 方法则会产生不必要的回调地狱。而使用 async 和 await 可以让异步代码看起来像同步代码，更加清晰易懂。
如何使用 async 和 await
定义一个 async 函数
使用 async 关键字可以定义一个异步函数，函数体内的代码会自动转化为 Promise。
async function fetchData() {
const response = await fetch('https://api.github.com/users');
const data = await response.json();
return data;
}等待一个异步操作的结果
使用 await 关键字可以等待一个异步操作完成，并返回它的结果。在 await 后面的代码只有在操作完成后才会执行。
async function fetchData() {
const response = await fetch('https://api.github.com/users');
const data = await response.json();
return data;
}
fetchData().then(data => console.log(data));在上面的例子中，fetchData() 函数会等待 fetch() 和 response.json() 异步操作完成后，才会返回 JSON 数据。如果其中任何一个操作出现错误，await 后面的代码将不会被执行，错误信息会被传递到 catch() 方法中。
处理 async 函数的错误
async 函数中的错误可以使用 try...catch 块来捕获。
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
------ -----
- ----- --- -
------------------ ----------- ---
-
-在上面的例子中，如果有任何报错，错误信息会被传递到 catch() 方法中，我们可以在其中打印错误信息、记录错误日志或者执行特定的错误处理逻辑。
async 函数的阻塞特性
async 函数的阻塞特性意味着 await 关键字可以中断异步操作的执行，等待异步操作完成后才会继续。
-- -------------------- ---- ------- ----- -------- ----------- - ------------------ -------- ---------- ----- -------- - ----- -------------------------------------- ----- ---- - ----- ---------------- ------------------- -------- ---------- ------ ----- - ------------------ --------- ----------- ------------ ------------------- --------- -----------
在上面的例子中，我们通过 console.log() 打印出了执行顺序，可以看到 async 函数中的 await 操作阻止了 fetch() 操作的继续执行，直到响应数据被解析出来后才会继续执行。
使用 async 和 await 的技巧和建议
- 使用 async 和 await 时，应该尽可能地减少嵌套。
- 对于一些必须顺序执行的异步操作，应该使用 await 来等待前一个操作完成后再执行下一个操作。
- 可以使用 Promise.all() 对多个异步操作进行并行处理。
- 在编写 async 函数时，应该注意其返回结果的数据类型和格式。
- 在处理 async 函数的错误时，应该尽可能地详细记录错误信息。
示例代码
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
------ -----
- ----- --- -
------------------ ----------- ---
-
-
----- --------- - --------------------------------------
----- -------- ------------ -
----- ---- - ----- ------------
----------------- -- -
----- -- - -----------------------------
------------ - -----------
--------------------------
---
-
-------------在这个示例代码中，我们定义了一个异步函数 fetchData() 用来获取 Github 上的用户列表数据，并在函数中使用了 try...catch 块来捕获错误信息。然后我们使用 async 函数 renderData() 来渲染用户列表，将 li 元素添加到名为 usersList 的列表中。最后我们调用 renderData() 函数来展示页面。
总结
使用 async 和 await 可以让异步代码看起来像同步代码，更加清晰易懂。要想熟练掌握 async 和 await，需要多写一些异步操作，并善于使用 Promise 和 try...catch 块来处理异步操作的错误信息。你也可以通过阅读 Promise 的文档来更好地理解 async 和 await。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6472b105968c7c53b004c919