前言
在前端开发中,异步操作几乎无处不在。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