Promise.allSettled 是 ES10 中新增的方法之一,它可以接收一个 Promise 数组,并返回一个新的 Promise 对象。
在这篇文章中,我们将会深入了解 Promise.allSettled 的应用及用法,并提供一些示例代码帮助大家更好地理解。
应用场景
在实际开发中,Promise.all 方法常常被用来处理多个异步操作。
const promise1 = Promise.resolve(1); const promise2 = Promise.resolve(2); const promise3 = Promise.resolve(3); Promise.all([promise1, promise2, promise3]) .then(values => console.log(values)) .catch(error => console.log(error));
在这个例子中,我们将三个 Promise 实例传递给了 Promise.all 函数,并在所有的 Promise 均已成功处理后打印它们的值。
然而,如果有一个 Promise 拒绝(reject)了,整个 Promise.all 将会立即终止并抛出一个错误,导致其他 Promise 无法被处理。
为了解决这个问题,Promise.allSettled 应运而生。该方法不会跳过任何 Promise,而是会返回所有 Promise 的结果(包括成功和失败)。
用法介绍
Promise.allSettled 与 Promise.all 的使用方式相似,只需将 Promise 数组传递给它即可。它返回一个 Promise 对象,该 Promise 将在所有 Promise 都已经 settled(也就是成功或失败)后 resolve,并将结果以数组的形式返回。
const promise1 = Promise.resolve(1); const promise2 = Promise.reject(2); const promise3 = Promise.resolve(3); Promise.allSettled([promise1, promise2, promise3]) .then(values => console.log(values)) .catch(error => console.log(error));
在这个例子中,promise2 被拒绝,但是 Promise.allSettled 仍然返回一个数组包含所有 Promise 的结果(包括 promise2 的失败)。
每一个 Promise 对象在数组中都包含了以下两个属性:
status
:Promise 的状态,可能是 "fulfilled" 或 "rejected"value
或reason
:当 Promise 成功时返回的值,失败时返回的错误原因。
以下是一个使用 Promise.allSettled 的完整示例代码:
-- -------------------- ---- ------- ----- ---- - - --------------------------------------------- ------------------------------------------------ --------------------------------------------- -- ------------------------------- -- ------------ ------------- -- - ---------------------- -- - -- -------------- --- ------------ - -------------------------- - ---- - --------------------------- - --- ---展开代码
在这个例子中,我们使用 fetch API 获取多个 URL 的数据,并使用 Promise.allSettled 捕获每个 Promise 的结果。
当 Promise 有一个拒绝时,我们可以使用 result.reason 访问错误的原因,并在控制台中打印错误信息。
总结
在本文中,我们介绍了 ES10 中的 Promise.allSettled 方法、其用法及应用场景,并提供了一些示例代码帮助大家理解。
通过使用 Promise.allSettled,我们可以更好地处理多个 Promise 的结果,同时避免由于单个 Promise 的失败导致整个 Promise 链的中断。
希望这篇文章能够帮助你更好地理解 Promise.allSettled 的用法及其在前端开发中的作用。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/648ff62a48841e9894e1a39c