随着 JavaScript 语言的发展，异步编程成为了非常关键的一部分，而且在一些项目中，它更是恰好占据了前端开发中工作量的大头。传统的异步编程方案虽然能够应对大多数需求，但是在某些场景下，开发人员经常会遇到许多困难和麻烦。ES8 中又引入了一个新的异步编程方案：async/await，使得异步编程变得更加简单和可读。
async 和 await
async/await 是 JavaScript 中的一种异步编程模式和新的关键字，它们的出现让异步编程的代码风格和书写方式变得更加清晰和简洁。在确保编写的异步程序流程正确性的同时，可以把异步编程的语法变得近似于同步编程的语法，从而使代码的可读性更高并且更容易调试。
async
在函数声明时，async 关键字可以放在函数前面。只要一个函数被标记为 async，它就将自动返回一个 Promise 对象。
async function fetchData() {
return "Hello World";
}
fetchData().then(data => {
console.log(data);
});在这段代码中，fetchData 函数是一个 async 函数，它会自动返回一个 Promise 对象。在 fetchData 被调用之后，它会返回一个 Promise，然后调用它的 then 方法来获取它的返回值。
await
await 关键字只能在 async 函数中使用。当有一个异步操作被执行并返回结果，await 会暂停函数执行，直到异步操作完成并返回结果，然后将结果保存在一个变量中。代码示例如下：
-- -------------------- ---- -------
----- -------- --------- -
------ --- --------------- -- -
------------- -- -
-----------------
-- ------
---
-
----- -------- ---------- -
----- ---- - ----- ----------
------------------- ----------
-
-----------在这段代码中，getName 函数返回一个 Promise 对象，等待 1 秒后 resolve 一个字符串 "Alice"。在 greeting 函数中，await 关键字将暂停代码的执行，直到 getName 函数返回其结果。执行 greeting 函数时，它将等待 getName 函数完成，返回 "Alice"，然后输出 "Hello, Alice"。
实践示例
接下来，我们将会以一个实际的应用程序为例，展示 async/await 在实际项目中的使用。在这个例子中，我们将会用 ES8 的 async/await 方式实现对后端数据的获取和处理。
获取数据
在这个示例中，我们首先要获取远端数据。我们可以使用 fetch API 来从远端获取数据，fetch API 返回一个 Promise，并且可以在 async 函数中使用。下面是一个获取数据的示例：
async function fetchData() {
const response = await fetch("/api/data");
const data = await response.json();
return data;
}在这个 fetchData 函数中，我们使用 await 来暂停函数执行，等待 fetch API 被调用后返回结果。当从 API 中获取到数据后，我们解析 JSON 并返回 data，并带回到调用 fetchData 的地方。
处理数据
在获得数据之后，我们需要将返回的数据对象解析并且在页面中展示。在这个实例中，我们需要将数据渲染为 HTML 列表：
-- -------------------- ---- -------
----- -------- ------------ -
----- ---- - ----- ------------
----- ---- - -----------------------------
----------------- -- -
----- -- - -----------------------------
----- ---- - -----------------------------------
---------------------
---------------------
---
--------------------------------
-
-------------在这个代码块中，我们使用 fetchData 获取数据，然后创建一个 ul 列表。在循环遍历数据之后，我们将每一项数据渲染为 li 列表项，并将其添加到列表 ul 中。在操作完成后，我们将该列表添加到文档主体。
总结
async/await 是一个在 JavaScript 中非常有用的工具。异步编程是一个日常开发中不可避免的问题，我们需要找到一种更好的方法来解决它。async/await 使用的是 Promise，因此它很好地处理了异步值的问题。相比于传统的回调函数和 Promise 编码方式，它可以使异步代码更加清晰、简洁和易于理解。在实践中，可以使用 async/await 来处理许多异步操作，并且能很好地提高代码的可读性和执行效率，可以作为每个前端开发者必须熟练掌握的重要工具之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e1e899f6b2d6eab3d31f53