在 JavaScript 中，异步编程是一项必备技能。它让我们能够在不卡住主线程的情况下执行长时间运行的任务，如网络请求、文件读写等。ES7 中引入的 await 关键字，是一种让异步编程更加方便、易读的语法糖。本文将详细介绍 await 的用法，并提供示例代码帮助读者理解。
简介
在介绍 await 之前，先回顾一下 JavaScript 中异步编程的方式。一般来说，有以下几种方式：
- 回调函数
- Promise
- Generator
- async/await
其中前三种方式有各自的优缺点，但是都不够优雅、易读。ES7 引入的 async/await，为异步编程带来了全新的方式。
async 函数是 ES7 中用来声明一个异步函数的关键字。当 async 函数返回一个值时，它将自动转换为 Promise。而 await 关键字，则是一种只能在 async 函数内部使用的语法糖。它等待异步操作完成（通常是一个 Promise），并返回其结果。
用法示例
下面的代码展示了如何使用 await 和 async 来简化异步编程。
// javascriptcn.com 代码示例
function getData() {
return new Promise(resolve => {
setTimeout(() => {
resolve('data');
}, 1000);
});
}
async function fetchData() {
const data = await getData();
console.log(data); // 输出 "data"
}
fetchData();fetchData 函数中的 await getData() 等待 1 秒钟，直到 getData 函数返回一个值（'data'），然后将其赋给变量 data。接着打印出该变量，输出为 "data"。值得注意的是，fetchData 函数因为包含了 await 关键字，所以需要声明为 async 函数。
await 关键字只能在 async 函数内部使用。如果在非 async 函数内使用 await，编译器将报错。我们可以在 async 函数内部使用多个 await，以不同的顺序调用多个异步操作。
// javascriptcn.com 代码示例
function fetchUserData(userId) {
return new Promise(resolve => {
setTimeout(() => {
resolve(`User ${userId}`);
}, Math.floor(Math.random() * 1000));
});
}
async function fetchAllUserData() {
const userData1 = await fetchUserData(1);
console.log(userData1); // 输出 "User 1"
const userData2 = await fetchUserData(2);
console.log(userData2); // 输出 "User 2"
}
fetchAllUserData();在 fetchAllUserData 函数中，我们先调用了 fetchUserData(1) 获取用户1的数据，并打印出该数据。接着调用 fetchUserData(2) 获取用户2的数据，并打印出该数据。注意，两个异步操作并没有并行执行，而是依次执行，因为第二个操作的调用是在第一个操作完成之后才执行的。
await 还可以和 Promise.race 和 Promise.all 等 Promise 的方法一起使用，以实现更强大的异步编程能力。
总结
通过本文的介绍，我们了解了 ES7 中 await 的用法和示例。使用 await 和 async 可以让异步编程变得更加方便、易读。除了本文示例中的用法外，还有很多更复杂、更高级的应用场景。学习和掌握 async/await 来实现异步编程，有助于提高 JavaScript 编程的效率和质量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6546064d7d4982a6ebfcac00