在前端开发过程中,遇到异步操作出错或失败的情况时,我们往往需要对每个操作的错误进行捕获和处理。这可以通过 try/catch
语句或 .then().catch()
的链式调用来实现。但是在实际开发中,如果遇到很多个异步操作,这种处理方式会变得非常繁琐和复杂。在 ES10 中,Promise.allSettled()
方法的出现,为我们在处理异步异常时带来了全新的解决方案。
Promise.all 的问题
在了解 Promise.allSettled()
的使用前,我们先来看一下在 ES5 中使用 Promise.all()
的问题。
当我们需要同时处理多个异步操作时,我们通常会使用 Promise.all()
方法。这个方法可以接收一组 Promise 实例作为参数,返回一个新的 Promise 实例,该实例在所有 Promise 对象完成(状态变为 fulfilled)时才会执行回调函数。但是如果其中有一个 Promise 对象出现错误,整个 Promise.all()
的执行就会中断,同时抛出一个错误信息。
-- -------------------- ---- ------- ------------- ------------------------- ------------------------ ------------------------ ----------- -- - ---------------- ------------ -- - ---------------- -- -- -------- -- ----------- -- -------------- ------------------- -----------
在上面的例子中,如果我们想要捕获 Promise.reject()
中的异常并继续执行其他 Promise 对象,那么就需要在 .then().catch()
的链式调用中针对每个 Promise 对象进行单独的异常处理,这个过程非常繁琐和复杂。
Promise.all([ Promise.resolve('hello'), Promise.reject('error'), Promise.resolve('world') ].map(p => p.catch(e => e))).then(res => { console.log(res) }) // 输出:["hello", "error", "world"]
在上面的例子中,我们对每个 Promise 对象通过 .catch()
进行了单独的异常处理,并使用了 map()
方法将结果重新封装。
但是这样的代码看起来非常冗长和低效。在 ES10 中,Promise.allSettled()
的出现,让我们可以使用更为优雅和简单的方式来处理异步操作中的错误。
Promise.allSettled 的使用
Promise.allSettled()
方法接收一个 Promise 数组作为参数,并返回一个新的 Promise 实例。该实例的状态只有在数组中所有的 Promise 对象都已经执行完毕后才会变为 fulfilled
状态,不管每个 Promise 对象完成的状态是成功还是失败。这样一来,我们就可以更加方便地对每个 Promise 对象的执行结果进行捕获和处理。
-- -------------------- ---- ------- -------------------- ------------------------- ------------------------ ------------------------ ----------- -- - ---------------- -- -- ---- -- -------- ------------ ------ --------- -- -------- ----------- ------- --------- -- -------- ------------ ------ -------- -- -
在上面的例子中,我们可以看到 Promise.allSettled()
返回的数组元素不仅包含了每个 Promise 对象完成的结果,也提供了一个状态属性 status
来标识 Promise 对象的执行状态(fulfilled
或 rejected
)。
我们可以通过 for...of
循环来遍历每个 Promise 对象的执行结果,并进行相应的处理。
-- -------------------- ---- ------- ----- -------- - - ------------------------- ------------------------ ------------------------ - --- ------ ------- -- --------- - ---------------- -- ----------------- ---------- -- ----------------- ----------- -- -------------------- - -- --------- ------ ----- ------ ----
在上面的例子中,我们使用 for...of
循环遍历了所有的 Promise 对象,并在每个 Promise 对象后都输出了 done
。这样一来,无论每个 Promise 对象执行结果是否成功,我们都可以保证程序的正常执行,同时也能捕获和处理每个 Promise 对象可能出现的异常情况。
总结
Promise.allSettled()
方法的出现,为我们解决前端开发中的异步操作异常处理问题提供了新的解决方案。在使用过程中,我们只需要将所有需要处理的 Promise 对象作为参数传入,就可以轻松地获得它们的执行结果,并对每个结果进行相应的处理。
同时,在处理异常的过程中,我们也可以使用 for...of
循环来遍历每个 Promise 对象的执行结果,并确保程序的正常执行。这种方式既高效又优雅,让我们在开发中更加轻松地处理一系列异步操作异常情况。
示例代码
-- -------------------- ---- ------- -- -- -------------------- ---------- -------------------- ------------------------- ------------------------ ------------------------ ----------- -- - ---------------- --- ------ ------ -- ---- - -- -------------- --- ------------ - ------------------------- - ---- - -------------------------- - - -- -- --- -- - -- -------- ------------ ------ --------- -- -------- ----------- ------- --------- -- -------- ------------ ------ -------- -- - -- ------ ------ ----- -- -- -------- ------------ ----- -------- - - ------------------------- ------------------------ ------------------------ - --- ------ ------- -- --------- - ---------------- -- ----------------- ---------- -- ----------------- ----------- -- -------------------- - -- --- -- ------ ------ ----- ------ ----
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6499898848841e989468f1f5