在前端开发中，我们经常会遇到一些需要同时请求多个接口或者向多个 URL 发送请求的情况。传统的做法是使用多个请求并发或者串行的方式来实现，但这样会导致代码量大、可读性差、维护麻烦等问题。而 ES9 新增的 Promise.all() 方法提供了一种更优雅的解决方案，可以帮助我们高效地进行多路复用。
Promise.all() 方法简介
Promise.all() 方法是 Promise 中的一个静态方法，它接受一个 Promise 数组作为参数，并在这些 Promise 都成功 resolve 后返回 Promise 实例，Promise 实例的状态为 fulfilled，对应的 resolve 函数的参数是一个数组，数组中的值按照传入 Promise 数组的顺序排列。如果其中任意一个 Promise 被 rejected，返回的 Promise 实例的状态为 rejected，对应的 reject 函数的参数是第一个被 rejected 的 Promise 对象的错误信息。
Promise.all() 方法的语法如下：
Promise.all(iterable)
其中 iterable 是一个可迭代对象，比如数组。
Promise.all() 实现多路复用
在实际开发中，我们可以将多个请求并发发出，然后使用 Promise.all() 方法将它们的结果进行合并，这样可以同时请求多个接口，提高页面的加载速度。
下面我们以一个搜索页面为例，假设我们需要同时向图书、电影和音乐三个接口发送请求，获取对应数据后将它们合并后展示在页面上。传统做法是使用三个单独的请求，代码如下：
fetch('/api/book').then(response => response.json()).then(data => {
// 处理图书数据
})
fetch('/api/movie').then(response => response.json()).then(data => {
// 处理电影数据
})
fetch('/api/music').then(response => response.json()).then(data => {
// 处理音乐数据
})使用 Promise.all() 方法可以优化上述代码，直接将三个请求传入 iterable 对象中，代码如下：
Promise.all([
fetch('/api/book').then(response => response.json()),
fetch('/api/movie').then(response => response.json()),
fetch('/api/music').then(response => response.json())
]).then(data => {
// 处理图书、电影和音乐数据
})这样就实现了并发请求，当所有请求都返回结果后，我们在 then 方法中处理数据即可。注意，Promise.all() 方法中的 Promise 对象是并发执行的，如果其中某一个 Promise 的返回时间较长，会导致其他 Promise 延迟执行，这时候可以考虑使用 Promise.race() 方法实现一个超时机制，避免长时间等待。
Promise.all() 的指导意义
Promise.all() 方法的出现，让我们在实现多路复用时有了更好的选择，优化了代码结构和性能。它不仅可以用于请求接口，还可以用于其他多个异步操作的并行执行，比如同时上传多个文件、同时打开多个资源等，提高了页面的响应速度和用户体验。
当我们使用 Promise.all() 方法时，还需要考虑一个重要的问题：如何处理 Promise.all() 返回的结果。在此之前，我们可以使用 Promise.then() 方法来处理单个 Promise 的结果，但是在使用 Promise.all() 方法时，我们需要针对返回结果的类型、数量等进行判定和解析，才能正确地处理数据。因此，我们在使用 Promise.all() 时需要对返回结果的格式和顺序等进行规定和统一，以便更好地对多个数据源进行统一处理。
示例代码
下面是一个完整的使用 Promise.all() 方法的示例代码：
Promise.all([
fetch('/api/book').then(response => response.json()),
fetch('/api/movie').then(response => response.json()),
fetch('/api/music').then(response => response.json())
]).then(data => {
const books = data[0]
const movies = data[1]
const musics = data[2]
// 处理图书、电影和音乐数据
}).catch(error => {
console.error(error)
})上述代码中，我们使用 Promise.all() 方法来并发请求三个接口，对返回的数据进行解析后进行处理。如果其中一个请求出错，我们将通过 catch 方法来捕获错误并输出到控制台。
总结
Promise.all() 方法是 ES9 中新增的静态方法之一，它可以帮助我们高效地进行多路复用和并发请求。在实际开发中，我们需要考虑多个异步操作的执行顺序和结果，针对返回结果的格式和顺序等进行规定和统一。在使用 Promise.all() 方法时，还需要注意处理异常情况，保证代码的可靠性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6591d695eb4cecbf2d6d668d