在前端开发中，异步操作是非常常见的。例如，我们经常需要通过 AJAX 请求从服务器获取数据。在 JavaScript 中，异步操作通常使用回调函数实现。但是，如果异步操作嵌套过多，就会形成回调地狱，代码会变得难以维护和理解。ES8 引入了 async/await 关键字，可以让我们更方便地处理异步操作，避免回调地狱。
async/await 简介
async/await 是 ES8 中的新特性，它是 Promise 的语法糖。async/await 可以让我们以同步的方式编写异步代码，避免了回调地狱的问题。async/await 的使用方式是，将异步操作放在 async 函数中，然后使用 await 关键字等待异步操作的结果。
async 函数
async 函数是一个返回 Promise 的函数。async 函数内部可以使用 await 关键字等待一个 Promise 对象的状态变化。如果 Promise 对象变为 resolved 状态，await 表达式的值就是 resolved 的值；如果 Promise 对象变为 rejected 状态，await 表达式就会抛出错误。
下面是一个简单的例子，演示了如何使用 async 函数和 await 关键字：
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
}在上面的代码中，fetchData 函数是一个 async 函数。它使用 await 关键字等待一个 Promise 对象，该 Promise 对象是通过 fetch 函数获取数据的结果。如果 fetch 函数返回的 Promise 对象是 resolved 状态，await 表达式的值就是 resolved 的值，也就是服务器返回的数据。然后，fetchData 函数又使用 await 关键字等待一个 Promise 对象，该 Promise 对象是将服务器返回的数据解析为 JSON 的结果。最后，fetchData 函数输出解析后的数据。
await 表达式
await 表达式只能在 async 函数内部使用。await 表达式后面跟着一个 Promise 对象，表示等待该 Promise 对象的状态变化。
如果 Promise 对象是 resolved 状态，await 表达式的值就是 resolved 的值；如果 Promise 对象是 rejected 状态，await 表达式就会抛出错误。如果 Promise 对象的状态一直未变化，await 表达式就会一直等待，直到 Promise 对象变为 resolved 或 rejected 状态。
下面是一个简单的例子，演示了如何使用 await 表达式等待一个 Promise 对象的状态变化：
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
}在上面的代码中，await 表达式后面跟着的是一个 Promise 对象，该 Promise 对象是通过 fetch 函数获取数据的结果。如果 fetch 函数返回的 Promise 对象是 resolved 状态，await 表达式的值就是 resolved 的值，也就是服务器返回的数据。如果 fetch 函数返回的 Promise 对象是 rejected 状态，await 表达式就会抛出错误。
错误处理
在 async 函数中，如果 await 表达式抛出错误，可以使用 try/catch 语句捕捉错误。如果 async 函数中没有 try/catch 语句，错误会被 Promise 对象捕捉，变为 rejected 状态。
下面是一个简单的例子，演示了如何使用 try/catch 语句处理错误：
// javascriptcn.com 代码示例
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}在上面的代码中，try/catch 语句用来处理 await 表达式可能抛出的错误。如果 await 表达式抛出错误，就会跳转到 catch 语句块中，输出错误信息。
示例代码
下面是一个完整的示例代码，演示了如何使用 async/await 处理异步操作：
// javascriptcn.com 代码示例
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
fetchData();在上面的代码中，fetchData 函数是一个 async 函数，用来获取服务器返回的数据。它首先使用 fetch 函数获取数据，然后使用 await 关键字等待获取数据的结果。如果获取数据的 Promise 对象是 resolved 状态，await 表达式的值就是 resolved 的值，也就是服务器返回的数据。如果获取数据的 Promise 对象是 rejected 状态，await 表达式就会抛出错误。最后，fetchData 函数输出服务器返回的数据。
总结
async/await 是 ES8 中的新特性，可以让我们更方便地处理异步操作，避免回调地狱的问题。async/await 的使用方式是，将异步操作放在 async 函数中，然后使用 await 关键字等待异步操作的结果。在 async 函数中，可以使用 try/catch 语句捕捉错误。async/await 是 Promise 的语法糖，它可以让我们以同步的方式编写异步代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655f14e6d2f5e1655d93cc48