在日常前端开发中，我们经常会遇到需要处理异步操作的情况。在过去，我们可能会使用回调、Promise 等方式来解决异步问题，这些方法虽然可以达到目的但却往往存在代码复杂度高、可读性差等问题。ECMAScript 2017 引入了 async/await 语法糖来解决这一问题，让异步操作变得更加简单易读，并且在处理复杂业务场景时也具有很大的优势。
async/await 简介
async/await 是 ECMAScript 2017 中新增的异步编程语法，它是基于 Promise 进行实现的，并且可以视为 Promise 的语法糖。在使用 async/await 时，我们可以将异步代码看作同步代码来编写，从而使代码的可读性和可维护性都得到大幅提升。
async/await 主要包含以下两个关键字：
- async：async 函数是一个返回 Promise 对象的函数，通过在函数名前添加 async 关键字声明。当调用带有 async 关键字的函数时，该函数将自动返回一个 Promise 对象。
- await：await 表示在执行异步操作时，程序会暂停执行，直到异步操作完成并返回结果后才会继续执行下面的代码。
使用 async/await 优化异步代码
下面我们将通过示例代码来演示如何使用 async/await 来优化异步代码处理。
使用 Promise 处理异步操作
在使用 async/await 之前，我们先来回顾一下使用 Promise 来处理异步代码的写法。
// javascriptcn.com 代码示例
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = { username: 'ChatGPT', age: 25 };
resolve(data);
}, 2000);
});
}
fetchData()
.then((data) => {
console.log(`Username: ${data.username}, Age: ${data.age}`);
})
.catch((error) => {
console.error(`Error: ${error.message}`);
});在上面的代码中，我们定义了一个 fetchData 函数，该函数返回一个 Promise 对象，并且通过 setTimeout 模拟了异步操作长达 2 秒时间。然后我们通过 .then() 和 .catch() 方法来处理 Promise 的状态，并输出结果或错误信息。
使用 async/await 处理异步操作
现在，我们使用 async/await 语法糖来重构上面的代码。
// javascriptcn.com 代码示例
async function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = { username: 'ChatGPT', age: 25 };
resolve(data);
}, 2000);
});
}
async function main() {
try {
const data = await fetchData();
console.log(`Username: ${data.username}, Age: ${data.age}`);
} catch (error) {
console.error(`Error: ${error.message}`);
}
}
main();在上面的代码中，我们将 fetchData 函数前添加 async 关键字来表示该函数返回一个 Promise 对象。然后在 main 函数中通过 await 来暂停程序执行，等待 fetchData 函数返回结果并赋值给 data 变量。
使用 async/await 进行异步编程，在表达和处理异步逻辑时更加自然和直观，代码更容易读写和维护。同时还可以避免嵌套过深、回调地狱等问题，并且可以非常方便的处理多个异步操作。
总结
async/await 是 ECMAScript 2017 新增的语法糖，它使得 JavaScript 中的异步编程更加直观和简单。通过使用 async/await，我们可以将异步代码看作同步代码来编写，从而提升代码的可读性和
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652910837d4982a6ebba2d8c