JavaScript 是一门基于事件驱动、支持异步编程的脚本语言，而异步编程是 JavaScript 编程的重要部分。在 ES6 之前，JavaScript 的异步编程模式主要是通过回调函数和 Promise，但这两种方式都有各自的缺陷。ES8 引入了 async/await 特性，解决了这些问题，让异步编程更加简洁、易读和可维护。
什么是 async/await？
async/await 是 ECMAScript 2017 (ES8) 中引入的一组 JavaScript 关键字。它们提供了一种更加简洁、易读和可维护的异步编程方式。
- async 关键字用于声明一个函数是异步函数，该函数总是返回 Promise，异步函数中的代码会自动转换为 Promise 风格；
- await 关键字只能用于异步函数内部，它可以暂停异步函数的执行，等待 Promise 对象的状态变更，并将 Promise 的结果返回给调用者。
使用 async/await 的代码示例：
async function getUserData(userId) {
const user = await fetch(`/users/${userId}`);
const userData = await user.json();
return userData;
}
getUserData(10).then((data) => console.log(data));在上述示例中，getUserData 函数是一个异步函数，使用 await 关键字实现了在异步请求数据的同时，暂停代码执行，等待数据返回。由于该函数是一个异步函数，所以它会返回一个 Promise 对象，可以使用 then 方法来处理异步返回的数据。
async/await 的优势
相比于 Promise 和回调函数，async/await 根据以下几点优势：
1. 异步编程更加简洁
async/await 通过在异步函数中使用 await 关键字，可以将异步代码看做是同步代码，使异步代码的阅读和编写变得更加简单明了。
2. 代码的可读性更高
async/await 可以让异步代码看起来更像同步代码，使得代码的可读性更高，更容易理解代码的执行流程。
3. 维护代码更加方便
async/await 可以让异步代码变得更加简单明了，降低代码的复杂度，从而使得代码更容易维护和更新。
注意事项
使用 async/await 也需要注意一些事项：
1. async/await 函数必须在异步上下文中使用
async/await 函数只能在异步上下文中使用，如果在同步上下文中使用时，会抛出语法错误。异步上下文包括异步函数、事件回调函数、Promise.then 方法等场景。
2. await 关键字只能用于 Promise 对象
await 关键字只能等待 Promise 对象的状态变更。如果 await 后面的表达式不是 Promise 对象，会立即返回该表达式的值。如果需要等待非 Promise 对象，需要使用 Promise.resolve 对其进行包装。例如：
async function getUserProfile(username) {
const responseData = await Promise.resolve({ name: username });
return responseData;
}
getUserProfile('Mike').then((data) => console.log(data));在上述示例中，Promise.resolve 方法将传入的普通对象包装为 Promise 对象，从而使之可以在异步函数中使用 await。
3. async/await 只是语法糖
async/await 只是语法糖，本质上还是基于 Promise 实现的。因此，async/await 也存在着和 Promise 相似的问题和优化方法。
总结
async/await 是一种更加简洁、易读和可维护的异步编程方式，能够在不改变语言本质的前提下，大幅提高 JavaScript 的开发效率。使用 async/await 也需要注意一些事项，如只能在异步上下文中使用等。
在实际的开发过程中，适当地运用 async/await 可以使得代码更加易读易懂，提高代码的可维护性和可重用性。让我们一起加入到异步编程的行列中，提高 JavaScript 开发的实际能力吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646ec37f968c7c53b0d164ac