Promise.allSettled 方法是 ES11 新加入的 Promise 方法,它可以接受一个 Promise 数组作为参数,返回一个新的 Promise 实例,该实例在所有的 Promise 都已经成功/失败执行完毕后被 resolve。
Promise.allSettled 的返回值是一个数组,数组的每一项都代表了参数中每个 Promise 的执行状态,元素的 status 字段为 fulfilled,rejected 或者 pending。其中 fulfilled 和 rejected 表明执行成功或失败,pending 则表示未执行完成。rejected 状态也可能由于 Promise 的 reject() 方法导致。
Promise.allSettled 的使用
对于 Promise.allSettled 方法的调用,我们需要将希望执行的 Promise 对象以数组的形式传入该方法中。
const p1 = Promise.resolve(1); const p2 = Promise.reject(2); const p3 = Promise.resolve(3); Promise.allSettled([p1, p2, p3]).then(results => { console.log(results); });
控制台输出结果:
[ {status: "fulfilled", value: 1}, {status: "rejected", reason: 2}, {status: "fulfilled", value: 3}, ]
以上结果展示了 Promise.allSettled() 方法的返回值数组。该数组中的第一项表示传入 Promise 数组中的第一项的执行结果,第二项表示第二项的执行结果,依次类推。
Promise.allSettled 的深入理解
对于 Promise.allSettled 方法,我们可能需要对它的执行时序及返回值进行深入理解。
在调用 Promise.allSettled 方法后,该方法会遍历参数数组里的 Promise 对象,根据 Promise 不同的执行状态,修改 Promise.allSettled 返回的 Promise 对象的状态。直到所有的 Promise 对象执行状态都改变后,Promise.allSettled 的 Promise 对象才会被 resolve。
-- -------------------- ---- ------- ----- -- - ------------------- ----- -- - ------------------ ----- -- - ------------------- ------------------- --------------------- ----------------------- --- ----------------- -- - ------------------ ------------------------- --------- --- ------------------ --------------------
上述代码将会控制台打印以下信息:
before Promise.allSettled after Promise.allSettled after Promise.allSettled+++++ [ {status: "fulfilled", value: 1}, {status: "rejected", reason: 2}, {status: "fulfilled", value: 3}, ]
可见,Promise.allSettled() 方法会在前面的同步代码执行完成后,异步执行。
Promise.allSettled 的指导意义
使用 Promise.allSettled 方法对于前端开发中多个异步请求执行完毕,可以一次性对这些异步请求的结果进行集中处理,极大地增强了应用程序并发处理能力,并简化了代码复杂度。
示例 1: 多请求合并
通常,在前端开发中,我们需要同时请求多个接口并等待这些接口的请求响应后再进行后续处理。
使用 Promise.allSettled 和 new Promise 语句可以很容易地实现多请求合并:
-- -------------------- ---- ------- ----- ----------- - --- -- - ------ --- ----------------- ------- -- - -------------------- -- - -------------------- -- ---------- -- ------------ -- - -------------------- --------------------------- --------------------------- --------------------------- --------------------------- --------------------------- --------------- -- - --------------------------- -------- -- ------- --------- ----- -- ------- -- --- ------- --
示例 2: 多请求分类
对于多个接口请求的返回结果,我们可能需要按照不同的状态进行分类。这时我们可以通过 Promise.allSettled 来处理:
-- -------------------- ---- ------- ----- ----------- - --- -- - ------ --- ----------------- ------- -- - -------------------- -- - ------------------------ ---- ----- -- ---------- -- --------------- ---- ------ -- - ----- ---- - --------------- -------------- -------------- ------------------- --------------------- - ------------- -- - ----- ----------- - -- ----- --------------- - -- ----- ------ - -- ------------------ -- - -- -------------- --- ------------ - ---------------------------- - ---- - ------------------------ -------------------------- - -- ----------------------------------- ---------------- ------------------------------- ------------ -------------------------- ------- --
总结
Promise.allSettled 方法是一个很常用且有区别于 Promise.all 的新方法,它可以监控所有 Promise 的执行结果,对于弱化异步编程的代码组织、减少代码中逻辑嵌套、优化代码的性能(提高并发度)有很大帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64a7130f48841e98943a9d4c