在前端开发中，异步操作是很常见的，比如发送 Ajax 请求、读取文件等等。而在 ES9 中，有一种新的语法 async/await 可以方便地处理异步操作。它可以让我们像同步代码一样编写异步代码，使代码更加简洁易读。本文将介绍如何使用 async/await 来等待多个异步操作的完成。
async/await 简介
async/await 是 ES7 引入的语法糖，它基于 Promise 实现，可以让我们更加方便地编写异步代码。通过 async 关键字修饰函数，我们可以将这个函数变为异步函数。在异步函数中，可以使用 await 关键字等待一个 Promise 对象的完成，并将结果返回。
如何等待多个异步操作的完成
在实际开发中，我们常常需要等待多个异步操作的完成，然后再进行下一步操作。比如，我们需要先读取两个文件的内容，然后将它们拼接起来。这时，我们可以使用 Promise.all() 方法和 async/await 来等待多个异步操作的完成。
Promise.all() 方法接收一个 Promise 对象数组作为参数，返回一个新的 Promise 对象。这个新的 Promise 对象将在所有 Promise 对象都完成时被解决，并将所有 Promise 对象的结果作为一个数组返回。在使用 async/await 等待多个异步操作时，我们可以将这个新的 Promise 对象传递给 await 关键字。
下面是一个使用 async/await 和 Promise.all() 等待多个异步操作的示例代码：
// javascriptcn.com 代码示例
async function readAndConcatFiles() {
const [file1, file2] = await Promise.all([
readFile('file1.txt'),
readFile('file2.txt')
]);
return file1 + file2;
}
readAndConcatFiles()
.then(result => console.log(result))
.catch(error => console.error(error));在这个示例代码中，readAndConcatFiles() 函数是一个异步函数。它首先使用 Promise.all() 方法等待两个文件的读取操作完成。当两个文件都读取完成后，Promise.all() 方法返回一个包含两个文件内容的数组。然后，我们使用数组解构语法将这两个文件内容分别赋值给 file1 和 file2 变量。最后，我们将这两个文件内容拼接起来并返回。
在调用 readAndConcatFiles() 函数时，我们使用 then() 方法和 catch() 方法分别处理异步操作的成功和失败。在成功的回调函数中，我们将拼接后的文件内容打印到控制台上。在失败的回调函数中，我们将错误信息打印到控制台上。
总结
使用 async/await 和 Promise.all() 方法可以方便地等待多个异步操作的完成。这种方式可以让我们更加简洁易读地编写异步代码，提高开发效率。在实际开发中，我们可以根据具体的需求选择不同的异步操作方式来实现我们想要的功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655805cfd2f5e1655d244c66