今天的前端开发离不开异步操作，但是异步代码往往比同步代码复杂难懂，所以 ES9 引入了 async/await 语法来简化异步代码。本文将介绍 async/await 的使用方法和优势，并通过实例说明。
async/await 是什么？
async/await 是 ES9 中新增的一种语法糖，它使得异步代码看起来和同步代码一样简单易懂。通过 async/await，我们可以用同步的方式编写异步代码。
async/await 依赖于 Promise，而 Promise 是 ES6 中引入的一个对象，它能够更好地解决回调嵌套过深的问题。
async/await 的使用方法
async/await 是通过把异步代码转换成同步的方式来实现的，因此我们需要在异步操作前加上 async 关键字。async 函数会返回一个 Promise 对象，我们可以通过 await 关键字来等待 Promise 对象的状态改变。
await 关键字可以等待 Promise 对象被 resolved 或 rejected，它会暂停程序执行，直到 Promise 对象状态变为 resolved 或 rejected。
下面是 async/await 的使用方法：
async function foo() {
// 异步操作
let result = await promiseObject;
// 执行其他操作
return result;
}在上面的示例中，我们使用 async 定义一个异步函数 foo，在函数体中使用 await 等待 Promise 对象状态改变，并返回 Promise 对象的结果。
async/await 的优势
async/await 语法的优势很明显：
- 简洁明了：async/await 语法能够让我们用同步的方式编写异步代码，从而使得代码更加简洁明了，易于维护和理解。
- 错误处理：使用 try...catch 结构可以轻松处理 Promise 中的错误，从而避免回调地狱和猫头鹰式代码。
- 可读性强：async/await 语法具有可读性强的特点，使得代码更加易读易懂。
异步代码示例
下面是一个异步代码示例，使用 async/await 语法：
// javascriptcn.com 代码示例
async function getCityWeather(city) {
try {
let result = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=xxxxxxxxxxxxxxxxxxxxxxxx`);
let data = await result.json();
// 处理数据
let description = data.weather[0].description;
let temperature = data.main.temp;
let feelsLike = data.main.feels_like;
return {
city: city,
weather: description,
temperature: temperature - 273.15,
feelsLike: feelsLike - 273.15
}
} catch (error) {
console.error(error);
}
}在上面的示例中，我们通过 async/await 实现了对天气 API 的异步调用，并对 API 返回的数据进行解析和处理。通过 try...catch 结构，我们可以轻松地处理异步代码中的错误情况。
总结
async/await 语法使得异步代码更加简单易懂，易于维护和理解。通过示例代码，我们了解了 async/await 的使用方法和优势。
在实际开发中，我们应该充分利用 async/await 语法，使得我们的代码更加简洁明了。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/651a156395b1f8cacd21dad2