在前端开发中，经常需要同时请求多个接口，并在这些接口都返回后才能对数据进行处理和展示。在过去，我们往往使用 Promise.all 方法来实现多接口的并发请求，但是一旦其中某一个接口请求失败，整个请求链就会中断，可能导致后续的数据展示受到影响。
ES10 中引入了 Promise.allSettled 方法，它可以帮助我们在多个接口请求完成后，获取每个接口的请求结果，不受任何一个接口请求失败的影响。本文将介绍如何使用 Promise.allSettled 方法实现多接口并发请求，并提供示例代码。
什么是 Promise.allSettled
在 ES6 中，引入了 Promise 对象来解决异步编程的问题。Promise 对象可以让我们在异步操作完成后，进行后续的处理。而 Promise.all 方法允许我们在多个 Promise 对象同时执行完成后，再继续往下执行。
在 ES10 中，Promise 新增了 Promise.allSettled 方法，它允许我们同时执行多个 Promise 对象，并返回每个 Promise 对象执行结果的状态和结果值，不论其中任何一个 Promise 对象的执行结果是成功还是失败。返回结果是一个由对象组成的数组，每个对象包含了该 Promise 对象的执行结果。对象的属性包括：
status：Promise 对象的状态，有两种可能的取值：fulfilled表示 Promise 对象成功了，rejected表示 Promise 对象失败了。value或reason：Promise 对象成功时的结果值，或失败时的 reject 原因。
Promise.allSettled 方法使用示例
假设我们需要同时请求两个接口：/api/data1 和 /api/data2，并在两个接口都返回结果后进行数据处理。以下是使用 Promise.allSettled 的示例代码：
// javascriptcn.com 代码示例
const getDataPromise = url => {
return new Promise((resolve, reject) => {
fetch(url)
.then(res => res.json())
.then(data => {
resolve(data)
})
.catch(error => {
reject(error)
})
})
}
Promise.allSettled([
getDataPromise('/api/data1'),
getDataPromise('/api/data2')
]).then(results => {
// 处理结果
const fulfilledResults = results.filter(result => result.status === 'fulfilled')
const fulfilledData = fulfilledResults.map(result => result.value)
console.log(fulfilledData)
}).catch(error => {
console.error(error)
})上面代码中，我们定义了一个 getDataPromise 函数来发起每个接口的请求。getDataPromise 函数返回一个 Promise 对象，在 Promise 对象成功时会返回请求结果，失败时会返回 reject 原因。我们使用 Promise.allSettled 方法同时执行了两个 Promise 对象，即 /api/data1 和 /api/data2 接口的请求，然后在 Promise 对象执行完成后进行数据处理。
在 Promise.allSettled 方法返回的数组中，我们可以通过 filter 方法筛选出执行成功的 Promise 对象，然后使用 map 方法返回每个 Promise 对象的值，即每个接口请求的数据。
Promise.allSettled 与 Promise.all 的区别
Promise.all 方法会在其中任何一个 Promise 对象失败时，立即终止所有 Promise 对象的执行，并返回失败的 Promise 对象的 reject 原因。
而 Promise.allSettled 方法不会在某个 Promise 对象失败时中断执行，所有 Promise 对象都会执行完毕，并返回每个 Promise 对象的状态和结果值。
因此，如果我们需要同时请求多个接口，且在其中任一个接口请求失败时需要停止后面的请求执行，可以使用 Promise.all 方法。但是如果我们需要获取所有接口的请求结果，无论其成功或失败，可以使用 Promise.allSettled 方法。
总结
在前端开发中，同时请求多个接口是一种普遍的场景。ES10 中引入的 Promise.allSettled 方法，可以帮助我们在多个接口请求完成后，获取每个接口的请求结果，并不受任何一个接口请求失败的影响。本文介绍了 Promise.allSettled 方法的使用方法，并提供了示例代码。同时，我们也大致了解了 Promise.allSettled 方法与 Promise.all 方法的区别。在实际开发中，根据需要选择合适的方法，可以更好地处理异步请求相关的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f8001df6b2d6eab302e4e7