在编写前端代码时，异步请求是非常常见的需求，async/await 是一种在 JavaScript 中处理异步调用的方式。在 ES7 中，async/await 被加入了语言规范中，成为了 JavaScript 中处理异步编程的推荐方案。
在本篇文章中，我们将详解 async/await 的使用方法和相关知识点，并以实例代码进行演示，帮助读者更好地理解 async/await。
什么是 async/await？
async/await 在 JavaScript 语言中是基于 Promise 的一种语法糖，它可以让异步代码的书写更加简洁、易读、易维护。
async/await 内部执行的是一个异步函数，借助于 Promise 对象返回的状态变化，它可以帮助我们更好地处理异步请求。
async 和 await 的使用
async
async 是一个关键字，可以让函数以异步函数的形式执行。例如：
async function getMessage() {
const response = await fetch('https://api.example.com/message');
const data = await response.json();
return data.message;
}上面的代码中，getMessage() 函数使用了 async 关键字进行异步操作，之后使用 await 关键字等待网络请求返回的数据。注意，await 只能在 async 函数中使用，否则会导致语法错误。
await
await 后面可以跟随 Promise 对象。当 await 后面的 Promise 对象状态变成 resolved 或 rejected 时，await 表达式的值就是 Promise 对象返回的值。例如：
async function demo() {
console.log(await Promise.resolve('promise resolved'));
}上面的代码中，await Promise.resolve('promise resolved') 表达式的值就是 'promise resolved'。
async/await 的异常处理
当异步代码执行出现异常时，可以通过 try...catch 来进行捕获和处理。例如：
-- -------------------- ---- -------
----- -------- ------------ -
--- -
----- -------- - ----- -----------------------------------------
----- ---- - ----- ----------------
------ -------------
- ------------ -
-------------------
-
-上面的代码中，try...catch 语句用来捕获网络请求出现的异常，并使用 console.log(error) 打印错误信息。
async/await 与 Promise 的关系
async/await 是基于 Promise 的语法糖，它本质上还是返回 Promise 对象。例如：
-- -------------------- ---- ------- ----- -------- ------------ - ----- -------- - ----- ----------------------------------------- ----- ---- - ----- ---------------- ------ ------------- - ------------------------- -- - --------------------- -------------- -- - ------------------- ---
上面的代码中，getMessage() 函数返回的还是一个 Promise 对象，可以使用 then 和 catch 来对其进行处理。
实例代码演示
下面通过一个实例来演示 async/await 在前端开发中的应用。
我们需要使用一个 REST API，该 API 可以让我们获取已发布博客文章的列表。我们的任务是使用 async/await 发送请求并显示文章列表。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- ------------
-------
------
--- --------------------
--------
----- -------- --------------- -
--- -
----- -------- - ----- ----------------------------------------------------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
---------------------
-
-
----- -------- ---------------- -
----- -------- - ----- ----------------
----- --------------- - -------------------------------------
--------------------- -- -
----- --------- - -----------------------------
------------------- - -----------
---------------------------------------
---
-
---------------------------- -- -
---------------------
--
---------
-------
-------在上面的代码中，fetchBlogList() 函数用来发送请求并返回 Promise 对象，renderBlogList() 函数用来获取并渲染文章列表。我们需要注意的是，renderBlogList() 函数的返回值也是一个 Promise 对象，所以在使用时需要使用 catch 来捕获可能出现的异常。
总结
async/await 是一种处理异步编程的新方法，它通过代码简洁性、易读性、易维护性等优点被广泛使用。本文介绍了 async/await 的使用方法和相关知识点，同时也演示了 async/await 在实际开发中的应用。
值得注意的是，在使用 async/await 时，我们需要注意到异步函数之间的执行顺序，以避免出现潜在的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648ce9c248841e9894b37a69