介绍
在前端开发中，异步请求是非常常见的操作。在过去，我们通常使用回调函数或者 Promise 来处理异步请求。但是，这些方式都有缺点，比如回调函数会导致回调地狱，而 Promise 也有一些复杂的语法和使用限制。ES8/ES2017 引入了 async/await，它是一种更简单、更直观的处理异步请求的方式。
async/await 是基于 Promise 的，它可以让我们像写同步代码一样来处理异步请求。async/await 的语法也非常简单，可以让我们更容易地编写和维护代码。
async/await 的基本语法
async/await 的基本语法非常简单，我们来看一个例子：
async function fetchData() {
const response = await fetch('https://api.github.com/users/hello');
const data = await response.json();
console.log(data);
}这里我们定义了一个 async 函数 fetchData，它使用了 await 关键字来等待异步请求的返回结果。在这个例子中，我们首先使用 fetch 函数来请求 GitHub API，然后使用 await 等待请求返回结果。当请求返回结果后，我们再使用 await 来解析 JSON 数据。最后，我们将解析后的数据输出到控制台。
注意，我们在 async 函数前面加上了 async 关键字，以标识这是一个异步函数。在函数内部，我们使用 await 来等待异步请求的返回结果。当 await 等待的异步请求返回结果后，它会将返回值赋值给一个变量。在这个例子中，我们将 fetch 返回的 response 对象和 response.json() 返回的数据都赋值给了一个变量。
async/await 的优点
async/await 有以下优点：
简单易懂：async/await 的语法非常简单，让我们像写同步代码一样来处理异步请求，易于理解和维护。
避免回调地狱：使用 async/await 可以避免回调地狱的问题，让我们的代码更加清晰和易于阅读。
错误处理更方便：使用 try/catch 来处理异步请求的错误更加方便和直观。
async/await 的注意事项
async/await 也有一些需要注意的事项：
async/await 必须在支持 Promise 的环境中使用。
await 只能在 async 函数内部使用。
await 只能等待 Promise 对象的返回结果。
async 函数总是返回一个 Promise 对象。
async/await 的示例代码
下面是一个完整的示例代码，它使用了 async/await 来处理异步请求：
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- --------------------------------------------
----- ---- - ----- ----------------
------------------
- ----- ------- -
---------------------
-
-
------------在这个例子中，我们首先定义了一个 async 函数 fetchData，它使用了 try/catch 来处理异步请求的错误。在函数内部，我们使用 await 来等待异步请求的返回结果。当请求返回结果后，我们再使用 await 来解析 JSON 数据。如果请求或解析 JSON 数据出错，catch 语句会捕获错误并输出到控制台。
最后，我们调用 fetchData 函数来触发异步请求。由于 async 函数总是返回一个 Promise 对象，我们可以直接调用 fetchData 函数而不需要再使用 then 方法来处理返回结果。
结论
async/await 是一种更简单、更直观的处理异步请求的方式。它可以让我们像写同步代码一样来处理异步请求，避免回调地狱的问题，让我们的代码更加清晰和易于阅读。在实际项目中，我们可以使用 async/await 来处理异步请求，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673c53cf7088281697c77e7a