在前端开发中，异步操作是必不可少的。Promise 是一种常用的异步编程方式，它可以让代码更加清晰和易于维护。但是，即使是使用 Promise，我们仍然需要处理回调和链式调用，这可能会让代码变得复杂。为了解决这个问题，ES2017 引入了 async/await。
async/await 简介
async/await 是一种基于 Promise 的异步编程方式，它可以让异步代码看起来像同步代码。async/await 的基本用法是使用 async 关键字来声明一个异步函数，然后在函数内部使用 await 关键字来等待 Promise 的结果。例如：
async function fetchData() {
const response = await fetch('/api/data');
const data = await response.json();
return data;
}上面的代码中，fetchData 函数是一个异步函数，它使用 await 关键字来等待 fetch 和 response.json 的结果。当 fetchData 函数被调用时，它会立即返回一个 Promise，而不是回调函数。
async/await 的优点
使用 async/await 的主要优点是代码更加简洁和易于理解。相比于 Promise 的链式调用，async/await 可以让我们避免嵌套的回调函数，使代码更加扁平化和易于维护。
此外，async/await 可以让我们更方便地处理错误。在使用 Promise 的时候，我们需要使用 catch 方法来处理错误。而在使用 async/await 的时候，我们可以使用 try/catch 语句来处理错误，这使得代码更加清晰和易于理解。
async/await 的注意事项
使用 async/await 的时候，有一些需要注意的事项。
首先，async 函数必须返回一个 Promise。如果 async 函数返回一个非 Promise 的值，它会被自动包装成一个 Promise。
其次，await 只能在 async 函数内部使用。如果我们在普通的函数中使用 await，它会导致语法错误。
最后，await 关键字只能用于 Promise 对象。如果我们使用 await 关键字等待一个非 Promise 的值，它会被自动包装成一个 Promise，但是这个 Promise 的状态会立即变为 resolved，而不是等待非 Promise 的值变为 resolved。
async/await 示例代码
下面是一个使用 async/await 的示例代码，它使用 fetch API 获取数据并将数据显示在页面上：
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- -------------------
-- -------------- -
----- --- -------------- -------- --- --- -----
-
----- ---- - ----- ----------------
------------------------------------------- - ---------------------
- ----- ------- -
----------------------- -------
-
-
------------上面的代码中，fetchData 函数使用 try/catch 语句来处理错误。如果 fetch 返回的 response 的状态码不是 200，它会抛出一个错误。否则，它会将 response 的 JSON 数据显示在页面上。
结论
使用 async/await 可以让我们更加方便地处理异步操作，使代码更加简洁和易于理解。但是，我们仍然需要注意 async/await 的一些特殊语法和注意事项，以确保代码的正确性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67648d22856ee0c1d42c3b4b