前言
在前端开发中，异步操作几乎无处不在。Promise 作为一种异步编程的解决方案，在开发中也广泛应用。随着 ES10 的发布，Promise API 也得到了更新，其中就包含了 Promise.allSettled 方法的加入。本文将详细介绍 ES10 中的 Promise.allSettled 方法及其使用场景，同时分享一些 Promise 的调试技巧，帮助开发者更好地应用 Promise。
Promise.allSettled
定义
ES10 中新增了一个 Promise.allSettled 方法，用于接收多个 Promise，并在它们全部完成后返回一个状态为 fulfilled 的 Promise 对象。与 Promise.all 不同的是，Promise.allSettled 不关注 Promise 是否成功完成，而是等待所有项目都结束。
用法
Promise.allSettled 可以接收一个包含多个 Promise 对象的数组作为参数，也可接收类似于 Promise.all 的可迭代参数。返回的 Promise 实例会等待所有的 Promise 对象完成，然后会返回一个包含每个 Promise 对象的状态（fulfilled 或 rejected）以及其对应的结果（如果有）的数组。每个数组元素都是一个对象，包含：
- status：表示 Promise 对象的状态，只能是字符串 fulfilled 或者 rejected 之一。
- value：表示 Promise 对象解析后的值，仅在 status 为 fulfilled 时存在，否则为 undefined。
- reason：表示 Promise 对象状态为 rejected 时的错误原因，仅在 status 为 rejected 时存在，否则为 undefined。
const p1 = Promise.resolve(1); const p2 = Promise.reject(2); Promise.allSettled([p1, p2]).then(results => { console.log(results); //[ {status: "fulfilled", value: 1}, {status: "rejected", reason: 2}] });
应用场景
Promise.allSettled 的应用场景和 Promise.all 存在差别，它不关心每个 Promise 的结果，而是将它们的状态细化到更具体的层面，这意味着它不会因为一个 Promise 被 reject 而使 Promise.all 的整个 Promise 被 reject。相对的，它可以用于一组 Promise 需要返回状态或值的情况。例如：
const promise1 = Promise.resolve(1); const promise2 = new Promise((resolve, reject) => setTimeout(reject, 2000, 'rejected promise')); Promise.allSettled([promise1, promise2]) .then(([result1, result2]) => { console.log(result1.value); // 1 console.log(result2.reason); // "rejected promise" });
Promise 的调试技巧
Promise 的调试技巧在实际开发中非常实用，可以帮助我们更快的排除问题。其中，包括：
1. then() 中使用 console.log() 打印日志
在 Promise 中使用 console.log() 可以很容易地捕捉到 Promise 的状态，以便我们在开发阶段轻松检查 Promise 失败的原因。同时，也能够了解 .then() 方法返回的值。
-- -------------------- ---- ------- ------------------ ------------- -- - ------------------- -- ------- - ------ ----- - -- -- ------------- -- - ------------------- -- ------- - ------ ---------------------- ---------- -- ------------ -- - ------------------- -- ------- ------ ------- ---展开代码
此外，还可以通过 Promise 的链式调用，一步一步打印所有 Promise 部分的日志。这样做，可以轻易地分辨链中每一步中是否有问题。
-- -------------------- ---- ------- ------------------ ------------- -- - ------------------- -- ------- - ------ ----- - -- -- ------------- -- - ------------------- -- ------- - -------- --- --- ----- ---------- - ------ ----- - -- -- ------------- -- - ------------------- ------ ---- ---- --- ------- -- ------------ -- - ----------------- -- ------- -------- ------ ---- -- ----------- -- - -------------------- ----------- ---展开代码
2. 使用 Promise.reject() 创建异常
Promise.reject() 可以帮助我们在开发过程中快速异常。这里在第二个 then 中使用它，可以强制触发 catch() 中的代码。
-- -------------------- ---- ------- ------------------ ------------- -- - ------------------- -- ------- - ------ ----- - -- -- ------------- -- - ------------------- -- ------- - ------ --------------------- ------------ -- ------------ -- - ------------------- -- ------- ----- --------- ---展开代码
3. 使用 Promise.finally() 中的 console.timeEnd() 捕获时间
使用 console.time() 开始计时，并在 finally() 中使用 console.timeEnd() 停止计时，可以便捷的记录 promise 被 resolved 或者 rejected 的时间，方便排查问题。
-- -------------------- ---- ------- --------------------- ------- --------------------------- -------- -- - -------------------- ------------ -- --------- -- - -------------------- --------- -- ----------- -- - ------------------------ ------- -- ------- ------- ----- -------- ---展开代码
总结
ES10 的 Promise.allSettled 方法可以更细致地处理 Promise 状态。同时，使用合适的 Promise 调试技巧不仅可以帮助开发者快速定位问题，还能为查找问题提供巨大的帮助。在日常开发中，建议尽量使用上述技巧，更好地利用 Promise 解决异步操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649199ec48841e9894fa2f04
