首页 > 编程语言 >如何在JavaScript中使用Promise.allSettled()

如何在JavaScript中使用Promise.allSettled()

时间:2023-07-03 09:04:43浏览次数:60  
标签:承诺 拒绝 JavaScript API Promise 解决 allSettled

您是否曾经在 JavaScript 中使用过 Promise,并且当有人拒绝并毁掉一切时感到沮丧?

你编写了一些基于 Promise 的代码,一切都进展顺利,然后繁荣——一个小小的 Promise 被拒绝,整个链条就会崩溃。

你的代码逐渐停止,你想知道为什么 JavaScript 不能忽略这个小问题并继续它的快乐之路。好吧,朋友,我有好消息要告诉你吗?

来认识一下Promise.allSettled(),你的新最好的朋友和你从来不知道自己需要的承诺。Promise.allSettled()是一个游戏规则改变者,让您等待所有承诺得到解决(解决或拒绝),然后根据结果采取行动。

不再有被破坏的承诺链或未处理的拒绝。只是纯粹、纯粹的幸福承诺。和我一起深入研究这个鲜为人知但非常有用的 Promise 方法,看看它能在多大程度上简化你的异步 JavaScript代码。

(更|多优质内|容:java567 点 c0m)

 

什么是 Promise.allSettled()?

您想要使用 JavaScript 的 Promise.allSettled() 方法,但不太确定它是如何工作的或者为什么要使用它?不用担心,我已经为您提供了保障。

Promise.allSettled()等待你给它的所有承诺得到解决,意味着解决或拒绝。然后,它返回一个对象数组,其中包含每个承诺的状态和值或原因。

当您希望确保已完成多个异步任务,但不一定关心其中某些任务是否失败时,这非常有用。

例如,假设您有三个返回 Promise 的 API 调用,并且您希望从成功的调用中获取所有数据,即使其中一个调用失败。你可以这样做:

 Promise.allSettled([apiCall1(), apiCall2(), apiCall3()]).then((results) => {});

这将运行所有三个 API 调用,并且.then()在它们全部解决后将调用回调。结果数组将包含三个对象:每个承诺一个,其状态为“已完成”和数据,或者“已拒绝”和错误。

我们可以过滤以获取成功的调用,然后继续使用该数据。

要记住的关键事项是:

  • Promise.allSettled()等待所有输入承诺解决并返回其结果。

  • 已解决意味着已解决(已实现)或已拒绝。

  • 它返回一个对象数组,其中包含每个输入承诺的状态和值/原因。

  • 即使有人拒绝,它也允许处理成功的承诺。

问题与Promise.all()解决方案Promise.allSettled()

Promise.all()当您想要等待多个 Promise 完成并获取所有已解析值的数组时,这非常有用。但它有一个主要缺点:如果任何一个承诺被拒绝,整个Promise.all()承诺都会立即被拒绝。

在某些情况下这可能会出现问题。例如,假设您向三个不同的后端服务发出请求,只要其他两个服务成功,您并不真正关心其中一个是否失败。使用 时Promise.all(),单个被拒绝的 Promise 将拒绝整个组,并且您会错过其他 Promise 的成功响应。

幸运的是,有一个简单的解决方案:Promise.allSettled()。其工作原理与此类似,Promise.all()但如果任何 Promise 拒绝,它不会立即拒绝,而是等待所有 Promise 解决(解决或拒绝),然后返回一个对象数组,其中包含每个 Promise 的状态和值/原因。

例如:

 Promise.allSettled([
   Promise.resolve(1),
   Promise.reject(new Error("2")),
   Promise.resolve(3),
 ]).then((results) => {
   // results is an array of:
   // {status: "fulfilled", value: 1}
   // {status: "rejected", reason: Error}
   // {status: "fulfilled", value: 3}
 });

正如您所看到的,即使第二个承诺被拒绝,我们仍然从其他承诺中获得解析值。这使您能够优雅地处理拒绝,而不会错过任何成功的回复。

Promise.allSettled()在这些类型的情况下提供了更大的灵活性。您可以全面了解所有承诺,无论是否有一些拒绝,因此您仍然有机会利用任何已解决的值并适当处理拒绝。

因此,下次当您需要等待多个 Promise 但又不能因为拒绝而错过任何已解决的值时,请务必使用Promise.allSettled()!这是对Promise API 的一个非常有用的补充。

常见问题Promise.allSettled()

会Promise.allSettled()减慢我的代码速度吗?

并不真地。Promise.allSettled()只需等待您传递给它的所有承诺通过履行或拒绝来解决。它不会做任何其他会影响性能的事情。

我还能发现错误吗Promise.allSettled()?

是的,你绝对可以!Promise.allSettled()将为您提供每个承诺的结果,无论是履行还是拒绝。

对于任何被拒绝的 Promise,您都会得到拒绝的原因,通常是错误。.catch()您可以在调用的处理程序中捕获这些错误Promise.allSettled()。

我什么时候应该使用Promise.allSettled()vs Promise.all()?

Promise.allSettled()当您想要并行运行多个 Promise,但不希望单个被拒绝的 Promise 导致整个组拒绝时使用。

例如,如果您从多个第三方 API 获取数据,则一个 API 被拒绝的承诺不应阻止您从其他 API 获取数据。

Promise.all()当您想要并行运行 Promise 但需要它们全部成功完成才能使代码继续运行时,请使用。

例如,如果您需要从两个 API 获取数据以在页面上显示,则您希望在呈现数据之前满足这两个承诺。

我能得到已达成的承诺的结果吗?

是的!Promise.allSettled()返回一个对象数组,其中包含每个承诺的状态和值/原因。例如:

 Promise.allSettled([
   Promise.resolve(1),
   Promise.reject(new Error("2")),
   Promise.resolve(3),
 ]).then((results) => {
   console.log(results);
   /*
    [
      { status: "fulfilled", value: 1 },
      { status: "rejected", reason: Error: 2 },
      { status: "fulfilled", value: 3 }
    ]
    */
 });

您将获得有关所有承诺的信息,无论它们是履行还是拒绝,因此您可以全面了解并行操作。

结论

所以你有它。Promise.allSettled()这是一种你从来不知道自己需要的便捷方法。

您不再需要仅用Promise.all()try/catch 来处理潜在的拒绝。您可以让我们Promise.allSettled()为您处理所有这些事情,而只关注已解决的值。您的异步代码将更加干净且易于阅读。

(更|多优质内|容:java567 点 c0m)

标签:承诺,拒绝,JavaScript,API,Promise,解决,allSettled
From: https://www.cnblogs.com/web-666/p/17521835.html

相关文章

  • JavaScript 算法和数据结构之——基础JavaScript 笔记
    做整理是为了知识更加系统一些,遂记录参考资料js基础算法JavaScript字符串可以用单引号或双引号查找字符串长度.length空格符也会计算在内使用方括号查找字符串中的第一个字符方括号表示法(Bracketnotation)是一种在字符串中的特定index(索引)处获取字符的方法xxx[0]获取......
  • redirect-django-url-with-javascript
    https://www.appsloveworld.com/django/100/279/redirect-django-url-with-javascriptscore:3AcceptedanswerYoucanusethis:window.location.href="{%url'app:result'%}" score:1djangotemplatetagsworkinsidethedjangotem......
  • JavaScript逻辑运算符AND和OR之间的区别
    AND&&和OR||是JavaScript中的逻辑运算符,可用于执行不同的逻辑表达式。在这篇文章中,我将解释它们之间的区别。本文的目标是让您了解这些运算符的工作原理以及它们的不同之处。要理解这些运算符,了解JavaScript中真值和假值的概念非常重要。(更|多优质内|容:java567点c0m) ......
  • Promise
    Promise前端的异步运行机制JavaScript作为单线程运行于浏览器之中,这是每本JavaScript教科书中都会被提到的。同时出于对UI线程操作的安全性考虑,JavaScript和UI线程也处于同一个线程中。因此对于耗时的操作,将会阻塞UI的响应。为了更好的UI体验,应该尽量的避免JavaScript中执行较长......
  • JS高级用法:像大神一样玩转JavaScript
    前言众所周知,JavaScript是一种非常流行的编程语言,它已经成为了网页开发的必备技能。但是,在我们从事JavaScript编程的时候,我们却没有完全发掘和利用它的全部潜力。在本文中,我们将分享一些高级的JavaScript技巧,希望帮助掘友们更好地理解和掌握JavaScript编程。关于JS高级用法在学习Ja......
  • JavaScript aglo 算法 时间复杂度
    https://www.bigocheatsheet.com/https://www.hello-algo.com/chapter_preface/about_the_book/ gpt的回答好的,下面给出这些算法的JavaScript例子,并给出它们的时间复杂度分析:O(1)-常数时间复杂度:javascriptCopyCodefunctionconstantTimeAlgorithm(n){return2+......
  • laytpl( Layui 的一款轻量 JavaScript 模板引擎)html标签点击事件传递多参
     <scripttype="text/html"id="aobjectvalue_temp"><spanclass="us-font-blue"style="cursor:pointer"onclick="seeinfo('{{d.aobjectkey}}','{{d.atype}}')">[资源详情]</spa......
  • 来看一个人才对Promise的讲解
     我承若在女朋友生日那天给她买一个lv包包,如果生日那天isForget则resolve这个包(成功返回),反之则抛出一个错误:我加班去了,忘记了   ......
  • JavaScript实现Fly Bird小游戏
    1.分析页面结构,理清需求和功能游戏有三个界面,分别是开始界面,游戏界面和游戏结束界面。1.1开始界面 游戏的大背景上下移动的游戏标题和翅膀摆动的小鸟start按钮,点击进入游戏界面一直移动的地面1.2游戏界面显示越过障碍数量的计分器移动的障碍物,分别是上管道和下......
  • JavaScript中数组常用方法汇总!
    数组是一个复杂数据类型,我们在操作它的时候就不能再想基本数据类型一样操作了。比如我们想改变一个数组//创建一个数组vararr=[1,2,3]//我们想把数组变成只有1和2arr=[1,2]这样肯定是不合理,因为这样不是在改变之前的数组。相当于重新制作了一个数组给到arr......