Promise.all和 race

news2024/11/18 15:39:15

Promise.all()

  1. all方法可以完成并行任务, 它接收一个数组,数组的每一项都是一个promise对象。
  2. 返回值:
  • 成功时:当数组中所有的promise的状态都达到resolved的时候,就返回包含所有 Promise 结果的数组,并且是按照传递过来的顺序,但是注意的是他们执行的顺序并不是按照顺序的
  • 失败时:传递的任何一个 Promise 被拒绝,返回的 Promise 对象将被拒绝,并将首个被拒绝的 Promise 的结果作为其值。
  1. 当遇到发送多个请求并根据请求顺序获取和使用数据的场景,就可以使用 Promise.all 来解决
let promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1);
  }, 2000);
});
let promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(2);
  }, 1000);
});
let promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(3);
  }, 3000);
});
Promise.all([promise1, promise2, promise3]).then((res) => {
  console.log(res);
  //结果为:[1,2,3]
});
const promise1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log("进入promise1");
        resolve("Promise 1 resolved");
      }, 1000);
    });

    const promise2 = new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log("进入promise2");

        resolve("Promise 2 resolved");
      }, 2000);
    });

    const promise3 = new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log("进入promise3");

        reject("Promise 3 rejected");
      }, 1500);
    });

    Promise.all([promise1, promise2, promise3])
      .then((results) => {
        console.log("All promises resolved:", results);
      })
      .catch((error) => {
        console.error("At least one promise rejected:", error);
      });

在这里插入图片描述
从这个输出结果可以看出

  1. 在遇到reject就立即去执行then方法了,不会等到剩下的promise对象执行完;
  2. 即使遇到reject,之后还没执行完的promise会继续执行,只是不会再进入到then中了

如果第三个改成 resolve("Promise 3 resolve"),输出结果:
在这里插入图片描述

当然,失败的时候也可以把catch用then的第二个参数代替:
在这里插入图片描述
输出结果:(这里是console.log,所以和 console.error的输出形式不太一样,但是功能是一样的
在这里插入图片描述

Promise.race()

race方法和all一样,接受的参数是一个每项都是promise的数组,但是与all不同的是,哪个结果获得的快,就返回那个结果,不管结果本身是成功状态还是失败状态。如果第一个promise对象状态变成resolved,那自身的状态变成了resolved;反之第一个promise变成rejected,那自身状态就会变成rejected

  • 使用场景:当你想在多个 Promise 中的任何一个完成时执行某个操作时,可以使用 Promise.race
 let promise1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log("进入promise1了");
        reject(1);
      }, 2000);
    });
    let promise2 = new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log("进入promise2了");
        resolve(2);
      }, 1000);
    });
    let promise3 = new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log("进入promise3了");
        resolve(3);
      }, 3000);
    });
    Promise.race([promise1, promise2, promise3]).then(
      (res) => {
        console.log(res);
        //结果:2
      },
      (rej) => {
        console.log(rej);
      }
    );

在这里插入图片描述

  • 有一个promise进入race的成功回调后,其余函数继续执行,只是将不会再进入race的任何回调

那么race方法有什么实际作用呢?当要做一件事,超过多长时间就不做了,可以用这个方法来解决:

Promise.race([promise1, timeOutPromise(5000)]).then((res) => {});

补充:
Promise.allPromise.race 是 JavaScript 中用于处理多个 Promise 对象的两个常见方法。

  1. Promise.all:
    • 使用场景:当你有多个 Promise 需要同时执行,并且你想等待它们全部完成后再执行下一步操作时,可以使用 Promise.all
    • 行为:Promise.all 接收一个 Promise 数组作为参数,并返回一个新的 Promise 对象。该新 Promise 对象在所有传入的 Promise 对象都成功完成时才会被标记为成功,其结果是一个包含所有 Promise 结果的数组;如果任何一个 Promise 被拒绝(rejected),则返回的 Promise 会立即被拒绝,并且会带有第一个被拒绝的 Promise 的原因。
const promises = [promise1, promise2, promise3];
Promise.all(promises)
  .then(results => {
    // 所有 promise 都成功,results 是一个包含所有 promise 结果的数组
  })
  .catch(error => {
    // 任何一个 promise 被拒绝时执行
  });
  1. Promise.race:
    • 使用场景:当你想在多个 Promise 中的任何一个完成时执行某个操作时,可以使用 Promise.race
    • 行为:Promise.race 也接收一个 Promise 数组作为参数,并返回一个新的 Promise 对象。该新 Promise 对象会在数组中的任何一个 Promise 被解决(resolved)时被解决,并且结果与第一个完成的 Promise 的结果相同,无论是成功还是失败。
const promises = [promise1, promise2, promise3];
Promise.race(promises)
  .then(result => {
    // 第一个完成的 promise 成功或失败时执行
  })
  .catch(error => {
    // 第一个完成的 promise 失败时执行
  });

总的来说,Promise.all 用于等待多个 Promise 都完成,而 Promise.race 则用于等待多个 Promise 中的第一个完成。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1655693.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

短视频矩阵系统贴牌---saas源头开发

一、短视频矩阵运营注意事项: 如:房产行业 短视频矩阵运营是一个系统化的项目,涉及多个平台和账号的管理,以及内容的创作、发布和优化等多个方面。 以下是短视频矩阵运营的注意事项文档的概要以及结果运营数据 一周持续运营量 二…

Java | Leetcode Java题解之第75题颜色分类

题目&#xff1a; 题解&#xff1a; class Solution {public void sortColors(int[] nums) {int n nums.length;int p0 0, p2 n - 1;for (int i 0; i < p2; i) {while (i < p2 && nums[i] 2) {int temp nums[i];nums[i] nums[p2];nums[p2] temp;--p2;}i…

Driftingblues靶机系列Driftingblues4

获得靶机ip&#xff1a;192.168.108.36 扫描靶机的端口服务&#xff1a; 看到存在&#xff1a;ftp服务&#xff0c;ssh服务和web的http服务&#xff0c;先扫描一下web服务&#xff1a; 访问该网址&#xff1a; 在源代码中看到一串base64编码&#xff1a; Z28gYmFjayBpbnRydW…

抖音小店怎么找达人带货的?分享几个成功率超高的沟通话术!

哈喽~我是电商月月 做抖音小店&#xff0c;特别是无货源的商家想要更多的流量&#xff0c;必定会尝试直播卖货&#xff0c;不会自己直播卖货&#xff0c;就会开通精选联盟&#xff0c;在里面找达人合作 那精选联盟到底是怎样找达人带货的呢&#xff1f; 有的达人打招呼了根本…

【多客校园圈子系统】校园圈子校园论坛社区,多校园微社区交友 校园圈子系统-论坛,跑腿

校园生活服务平台已然成为校园创业的好选择&#xff0c;因为校园人口基数大&#xff0c;人口比聚集&#xff0c;并且现在的学生消费能力还是不错的&#xff0c;所以现在在校园里创业&#xff0c;那真是一个明智的选择&#xff0c;尤其是大学校园创业&#xff0c;但是校园生活服…

怎么用git在暂存区(stage)中移除不需要提交(commit)的文件?

2024年5月9日&#xff0c;周四上午 非常简单&#xff0c;用下面这条命令就可以了 git rm --cached <file>注&#xff1a;这条命令不会把文件从文件夹中删除&#xff0c;只会把文件从暂存区中移除出去 实战

【LeetCode】环形链表I 环形链表II

一、环形链表I 题目 思路 该题使用快慢指针 slow、 fast slow 走一步 &#xff0c;fast 走两步 当fast 走到空 或者 fast的下一个结点为空&#xff0c; 则无环 fast若追上slow &#xff0c; 则有环 结论证明 该思路默认了 &#xff1a; 若存在环形链表 &#xff0c; 无论…

阿里云发布通义千问2.5,OpenCompass上得分追平GPT-4 Turbo

5月9日消息&#xff0c;阿里云正式发布通义千问2.5&#xff0c;模型性能全面赶超GPT-4 Turbo&#xff0c;成为地表最强中文大模型。同时&#xff0c;通义千问最新开源的1100亿参数模型在多个基准测评收获最佳成绩&#xff0c;超越Meta的Llama-3-70B&#xff0c;成为开源领域最强…

前端奇怪面试题总结

面试题总结 不修改下面的代码进行正常解构 这道题考的是迭代器和生成器的概念 let [a,b] {a:1,b:2}答案 对象缺少迭代器&#xff0c;需要手动加上 Object.prototype[Symbol.iterator] function* (){// return Object.values(this)[Symbol.iterator]()return yeild* Object.v…

基于Python Django的公务员考试信息管理系统,附源码

博主介绍&#xff1a;✌Java老徐、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&…

简单几步解决Windows 10播放视频提示安装HEVC扩展

相信有不少人都遇到过以下的问题&#xff0c;废话不多说&#xff0c;直接上干货&#xff01; 1.下载插件 免费地址链接: 点击下载 2.安装插件 如图所示&#xff0c;在下载的目录路径里&#xff0c; 1.按住键盘 SHIFT&#xff0c;点击鼠标右键&#xff0c;选择在此处打开Powe…

5分钟了解下HDFS

随着大数据时代的到来&#xff0c;传统的数据存储和管理方式已经无法满足日益增长的数据处理需求。HDFS&#xff08;Hadoop Distributed File System&#xff09;作为Apache Hadoop项目的一部分&#xff0c;以其高度的容错性、可扩展性和高吞吐量&#xff0c;成为了处理大规模数…

ECMAScript 6简介

ECMAScript 6简介 发布日期目标ECMAScript 和 JavaScript 的关系ES6 与 ECMAScript 2015 的关系 ESx标准 命名规则 ECMAScript 的历史 1. ECMAScript 6简介 1.1. 发布日期 ECMAScript 6.0&#xff08;以下简称 ES6&#xff09;是 JavaScript 语言的下一代标准&#xff0c;已…

O2OA(翱途)开发平台如何实现待办消息的邮件通知

O2OA(翱途)开发平台[下称O2OA开发平台或者O2OA]的消息机制允许开发者通过配置实现邮件通知。本篇主要阐述如何实现待办消息的邮件通知。 一、先决条件&#xff1a; 1、O2Server服务器正常运行&#xff0c;系统安装部署请参考文档《如何在服务器上安装部署O2OA》 2、以拥有管理…

【网络协议】----IPv6协议报文、地址分类

【网络协议】----IPv6协议简介 【网络协议】----IPv6协议简介IPv6特点IPv4 和 IPv6报文结构IPv6报文格式-拓展报头 IPv6地址分类IPv6地址表示IPv6单播地址可聚合全球单播地址链路本地地址唯一本地地址特殊地址补充 接口标识&#xff08;主机位&#xff09;生成方法通过EUI-64规…

Pytorch学习笔记——认识数据

最近在跟着小土堆pytorch的视频跟着学习python&#xff0c;根据自己的理解和课程上面的知识&#xff0c;写了这一篇学习笔记。 1、加载数据 数据的加载是学习pytorch的第一步&#xff0c;我们需要加载数据&#xff0c;完成特征工程&#xff0c;对加载数据存在的一些特…

智慧文旅开启沉浸式文化体验,科技让旅行更生动:借助智慧技术,打造沉浸式文化体验场景,让旅行者在旅行中深度感受文化的魅力

一、引言 随着科技的飞速发展&#xff0c;传统旅游行业正经历着前所未有的变革。智慧文旅&#xff0c;作为一种新兴的旅游模式&#xff0c;正以其独特的魅力&#xff0c;吸引着越来越多的旅行者。智慧文旅不仅改变了人们的旅行方式&#xff0c;更在深度上丰富了人们的文化体验…

09 - 数据清洗案例

流程图 kettle 面板图片 操作步骤 1、订阅数据源&#xff08;kafka consumer&#xff09; 2、抽取字段并转换key&#xff08;JSON input&#xff09; 3、判断img字段是否有值&#xff0c;有的话进行url转base64&#xff08;JavaScript 代码&#xff09; // 获取输入字段的值 v…

Windows内核开发:如何使用STL

前言 大家都知道应用层c的STL非常强大&#xff0c;非常好用&#xff0c;但是在内核下就没法用了。针对这个问题&#xff0c;经过我不懈的寻找&#xff0c;终于找到了解决内核无法使用STL的方法。 使用new/delete关键字 先说一下常用关键字如何在内核中使用。其实只需要在一个全…

C++类和对象详解(一)

目录 面向过程和面向对象初步认识类的引入类的定义类的两种定义方式声明和定义全部放在类体中 声名定义分离 类的作用域成员变量命名规则建议访问限定符 类的封装类的实例化类对象模型类的对象大小的计算扩展 结构体内存对齐规则 感谢各位大佬对我的支持,如果我的文章对你有用,…