ES10 Promise.allSettled 以及 Promise 的调试技巧分享

阅读时长 6 分钟读完

前言

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

应用场景

Promise.allSettled 的应用场景和 Promise.all 存在差别,它不关心每个 Promise 的结果,而是将它们的状态细化到更具体的层面,这意味着它不会因为一个 Promise 被 reject 而使 Promise.all 的整个 Promise 被 reject。相对的,它可以用于一组 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

纠错
反馈

纠错反馈