在前端开发中,经常会遇到需要同时发起多个异步请求或者执行多个异步任务的场景,比如同时获取用户信息、商品列表和订单数据。Promise.allSettled是ES2020引入的Promise静态方法,专门用于等待所有传入的异步操作全部完成,不管每个操作是成功还是失败,都会返回对应的结果集合,非常适合需要获取所有异步操作最终状态的场景。

Promise.allSettled基本用法
Promise.allSettled接收一个可迭代对象作为参数,这个可迭代对象中的每个元素通常是Promise实例,也可以是其他值。方法会返回一个新的Promise实例,当所有传入的Promise都完成(不管是fulfilled还是rejected)之后,这个返回的Promise才会变为fulfilled状态,并且结果是一个数组,数组中的每个元素对应传入的每个Promise的结果。
基本使用示例如下:
// 定义三个异步操作
const promise1 = Promise.resolve('操作1成功');
const promise2 = Promise.reject('操作2失败');
const promise3 = new Promise((resolve) => {
setTimeout(() => {
resolve('操作3成功');
}, 1000);
});
// 使用Promise.allSettled处理
Promise.allSettled([promise1, promise2, promise3])
.then((results) => {
console.log(results);
// 遍历结果处理每个操作的状态
results.forEach((result, index) => {
if (result.status === 'fulfilled') {
console.log(`第${index + 1}个操作成功,结果:`, result.value);
} else {
console.log(`第${index + 1}个操作失败,原因:`, result.reason);
}
});
});
返回结果结构说明
Promise.allSettled返回的数组中,每个结果对象都有固定的结构,根据异步操作的状态分为两种:
- 当异步操作成功时,结果对象包含
status属性值为fulfilled,以及value属性,值为该异步操作的成功返回值。 - 当异步操作失败时,结果对象包含
status属性值为rejected,以及reason属性,值为该异步操作的失败原因。
我们可以用表格更清晰地对比两种结果结构:
| 操作状态 | status值 | 额外属性 | 属性说明 |
|---|---|---|---|
| 成功 | fulfilled | value | 异步操作的成功返回值 |
| 失败 | rejected | reason | 异步操作的失败原因 |
与其他Promise并发方法的对比
Promise的并发处理方法中,除了allSettled之外,常用的还有Promise.all和Promise.race,三者的适用场景有明显区别:
Promise.all
Promise.all同样接收多个Promise,等待所有Promise都成功之后返回成功结果数组,但是如果其中有一个Promise失败,就会立刻返回失败,不会等待其他Promise完成。如果业务场景要求所有异步操作都必须成功才能继续,适合用Promise.all,否则更适合用Promise.allSettled。
Promise.race
Promise.race是等待多个Promise中最快完成的那一个,不管是成功还是失败,只要有一个Promise状态改变,就立刻返回对应的结果,不会等待其他Promise。适合需要获取最快响应的场景,比如设置请求超时时间。
三者对比示例
const p1 = Promise.resolve(1);
const p2 = Promise.reject('错误');
const p3 = new Promise((resolve) => setTimeout(() => resolve(3), 500));
// Promise.all:有一个失败就直接返回失败
Promise.all([p1, p2, p3])
.then(res => console.log('all成功', res))
.catch(err => console.log('all失败', err)); // 输出 all失败 错误
// Promise.race:取最快完成的那个
Promise.race([p1, p2, p3])
.then(res => console.log('race成功', res))
.catch(err => console.log('race失败', err)); // 输出 race成功 1
// Promise.allSettled:等待所有完成,返回全部结果
Promise.allSettled([p1, p2, p3])
.then(res => console.log('allSettled结果', res));
// 输出 allSettled结果 [
// { status: 'fulfilled', value: 1 },
// { status: 'rejected', reason: '错误' },
// { status: 'fulfilled', value: 3 }
// ]
实际业务场景示例
比如在一个后台管理系统的首页,需要同时加载用户信息、公告列表、待办事项三个接口的数据,即使某个接口请求失败,也不影响其他接口数据的展示,这时候就非常适合用Promise.allSettled。
// 模拟三个接口请求函数
function getUserInfo() {
return new Promise((resolve) => {
setTimeout(() => resolve({ name: '张三', age: 25 }), 300);
});
}
function getNoticeList() {
return new Promise((_, reject) => {
setTimeout(() => reject('公告接口请求失败'), 500);
});
}
function getTodoList() {
return new Promise((resolve) => {
setTimeout(() => resolve([{ id: 1, content: '完成需求文档' }]), 800);
});
}
// 使用Promise.allSettled处理三个请求
async function loadHomeData() {
const results = await Promise.allSettled([
getUserInfo(),
getNoticeList(),
getTodoList()
]);
// 处理用户信息
const userResult = results[0];
if (userResult.status === 'fulfilled') {
console.log('用户信息加载成功:', userResult.value);
// 这里可以更新页面用户模块
} else {
console.log('用户信息加载失败:', userResult.reason);
}
// 处理公告列表
const noticeResult = results[1];
if (noticeResult.status === 'fulfilled') {
console.log('公告列表加载成功:', noticeResult.value);
} else {
console.log('公告列表加载失败:', noticeResult.reason);
// 可以展示默认公告或者错误提示
}
// 处理待办事项
const todoResult = results[2];
if (todoResult.status === 'fulfilled') {
console.log('待办事项加载成功:', todoResult.value);
// 这里可以更新页面待办模块
} else {
console.log('待办事项加载失败:', todoResult.reason);
}
}
loadHomeData();
注意事项
- Promise.allSettled是ES2020新增的方法,如果需要兼容旧版浏览器比如IE,需要使用对应的polyfill或者转译工具处理。
- 传入的参数如果不是Promise实例,Promise.allSettled会先把它转换成Promise,比如传入普通值会直接作为成功的结果处理。
- 如果传入的可迭代对象为空,Promise.allSettled会立刻返回一个成功状态的Promise,结果为空数组。
使用Promise.allSettled可以让多异步操作的处理逻辑更清晰,不需要额外处理单个Promise的失败情况,也不用担心某个操作失败导致整个并发流程中断,在需要获取所有异步操作最终状态的场景下是非常实用的选择。
Promise_allSettled异步操作JavaScript并发请求修改时间:2026-07-17 17:33:42