Promise.all、any、race和allSettled的相同点与不同点与应用场景

在JavaScript中,Promise对象是一种处理异步操作的方式。它允许我们以一种更优雅的方式来处理异步代码,而不是使用回调函数。在Promise中,有一些方法可以帮助我们更好地管理多个Promise实例,这些方法包括Promise.all、Promise.any、Promise.race和Promise.allSettled。在这篇文章中,我们将探讨这些方法之间的相同点和不同点,并了解它们的应用场景。

相同点:

  1. 传入参数和处理对象
    这些方法都接受一个可迭代的对象作为参数,这个对象中的每个元素都是一个Promise实例。此外,它们都针对的是多个Promise场景。

  2. 应用场景
    假设是两个Promise。成功成功时,可以使用all any race allSettled;成功失败时,也可以使用any race allSettled;失败成功时,可以使用any race allSettled;失败失败时,则可以使用race allSettled。

不同点:

处理结果和处理时机

  • Promise.all
    所有成功才返回数组。如果任何一个Promise失败,那么整个Promise链将立即终止并返回错误原因。

  • Promise.any
    只要有一个成功就返回。如果所有Promise都失败,那么整个Promise链将返回第一个错误原因。

  • Promise.race
    谁先执行,就返回。这意味着只要其中一个Promise完成(无论是成功还是失败),整个Promise链就会结束并返回相应的结果或错误原因。

  • Promise.allSettled
    所有执行完毕后才返回。无论成功还是失败,都会返回一个包含所有Promise状态和值/原因的对象数组。

返回值

  • Promise.all
    成功时返回一个包含所有成功值的数组,失败时返回一个包含错误原因的reason。

  • Promise.any
    成功时返回一个包含任意一个成功值的values,没有No;失败时返回一个包含第一个错误原因的reason。

  • Promise.race
    成功时返回一个包含第一个成功值的values,失败时返回一个包含第一个错误原因的reason。

  • Promise.allSettled
    返回一个包含所有Promise状态和值/原因的对象数组,格式为[{status:, value:}, {status:, reason:}]

应用场景:

Promise.all 示例 —— 等待所有成功

当你的应用需要同时加载多个资源,且所有资源都必须加载完成才能进行下一步操作时,Promise.all是一个理想的选择。例如,在加载页面前,你可能需要确保所有CSS和JS文件都已下载。

  • 假设你正在开发一个应用程序,需要同时从多个API端点获取数据。只有当所有请求都成功时,你才开始处理数据。
const fetchUserData = () => new Promise((resolve, reject) => {setTimeout(() => resolve({ name: 'Alice', age: 25 }), 1000);
});const fetchUserPosts = () => new Promise((resolve, reject) => {setTimeout(() => resolve(['Post 1', 'Post 2']), 1500);
});const fetchUserComments = () => new Promise((resolve, reject) => {setTimeout(() => resolve(['Comment 1', 'Comment 2']), 2000);
});Promise.all([fetchUserData(), fetchUserPosts(), fetchUserComments()]).then(values => {const [userData, userPosts, userComments] = values;console.log('User data:', userData);console.log('User posts:', userPosts);console.log('User comments:', userComments);}).catch(reason => {console.error('Failed to load data:', reason);});

Promise.any 示例 —— 只要有成功

在需要从多个来源获取数据的情况下,如使用多个CDN加载相同的资源,你可能只关心至少有一个来源成功。Promise.any可以确保只要有一个请求成功,你的应用就能继续运行。

  • 在这个例子中,我们尝试从三个不同的服务器获取相同的数据,只要其中一个服务器响应,我们就认为请求成功。
const fetchFromServerA = () => new Promise((resolve, reject) => {setTimeout(() => Math.random() > 0.5 ? resolve('Data from Server A') : reject(new Error('Failed')), 1000);
});const fetchFromServerB = () => new Promise((resolve, reject) => {setTimeout(() => Math.random() > 0.5 ? resolve('Data from Server B') : reject(new Error('Failed')), 1500);
});const fetchFromServerC = () => new Promise((resolve, reject) => {setTimeout(() => Math.random() > 0.5 ? resolve('Data from Server C') : reject(new Error('Failed')), 2000);
});Promise.any([fetchFromServerA(), fetchFromServerB(), fetchFromServerC()]).then(value => {console.log('Received data:', value);}).catch(reason => {console.error('All requests failed:', reason);});

Promise.race 示例 —— 谁快谁赢

Promise.race适用于那些需要快速响应的场景,比如设置请求超时。如果你有一个主要的请求和一个备用请求,你可以使用Promise.race来确保无论哪个请求先完成,你都可以立即得到结果。

  • 这里我们使用Promise.race来实现一个请求超时的功能。如果主请求在规定时间内没有完成,我们将取消它并使用默认值。
const mainRequest = () => new Promise((resolve, reject) => {setTimeout(() => resolve('Main Request Data'), 2500);
});const defaultRequest = () => new Promise((resolve, reject) => {setTimeout(() => resolve('Default Request Data'), 1000);
});Promise.race([mainRequest(), defaultRequest()]).then(value => {console.log('Data received:', value);}).catch(reason => {console.error('Request failed:', reason);});

Promise.allSettled 示例 —— 全盘接收

当你不仅关心所有请求的结果,而且还需要知道哪些请求成功了,哪些失败了,Promise.allSettled就派上用场了。它会返回一个包含了所有请求结果(无论成功还是失败)的数组,每个元素都携带了状态信息。

  • 这个例子中,我们想要确保我们能够收集到所有请求的结果,无论它们是否成功。
const requestA = () => new Promise((resolve, reject) => {setTimeout(() => Math.random() > 0.5 ? resolve('Data from A') : reject(new Error('Failed')), 1000);
});const requestB = () => new Promise((resolve, reject) => {setTimeout(() => Math.random() > 0.5 ? resolve('Data from B') : reject(new Error('Failed')), 1500);
});const requestC = () => new Promise((resolve, reject) => {setTimeout(() => Math.random() > 0.5 ? resolve('Data from C') : reject(new Error('Failed')), 2000);
});Promise.allSettled([requestA(), requestB(), requestC()]).then(results => {results.forEach(result => {if (result.status === 'fulfilled') {console.log('Success:', result.value);} else {console.log('Failure:', result.reason);}});});

以上代码示例展示了如何在不同的场景下使用这四个Promise方法。请注意,为了简化示例,我使用了setTimeout来模拟异步请求,实际应用中你可能会使用fetch或类似的HTTP请求库。

总结

总结来说,Promise.all、any、race和allSettled都是非常有用的工具,可以帮助我们在处理多个Promise时更加灵活和高效。理解它们之间的区别以及如何正确地应用它们,可以使我们的代码更加健壮和易于维护。

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

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

相关文章

Git学习1_Git安装(CSDN_20240714)

git下载 git下载官网如下: Git - Downloads (git-scm.com)https://git-scm.com/downloads 根据机器操作系统,下载对应的安装包 git安装 1. 点击安装程序,进入安装界面,如下图所示,点击next。 2. 选择安装路径&…

护网HW面试常问——组件中间件框架漏洞(包含流量特征)

apache&iis&nginx中间件解析漏洞 参考我之前的文章:护网HW面试—apache&iis&nginx中间件解析漏洞篇-CSDN博客 log4j2 漏洞原理: 该漏洞主要是由于日志在打印时当遇到${后,以:号作为分割,将表达式内容分割成两部…

Leetcode(经典题)day2

H指数 274. H 指数 - 力扣(LeetCode) 先对数组排序,然后从大的一头开始遍历,只要数组当前的数比现在的h指数大就给h指数1,直到数组当前的数比现在的h指数小的时候结束,这时h的值就是要返回的结果。 排序…

下载安装nodejs npm jarn笔记

下载安装nodejs npm jarn笔记 下载 Node.js安装Node.js修改node全局路径安装yarn 下载 Node.js 下载Node.js 安装Node.js 双击下载的下来的.msi文件运行并安装一直点next。安装路径可以是默认也可自定义。安装完成后Node.js和npm就安装完成了 命令行输入: nod…

LeetCode 面试题02.04.分割链表

LeetCode 面试题02.04.分割链表 C写法 思路🤔: ​ 将x分为两段,一段放小于x的值,另一段放大于x的值。开辟四个指针lesshead、lesstail、greaterhead、greatertail,head为哨兵位,防止链表为空时情况过于复杂…

推荐一款 uniapp Vaptcha 手势验证码插件

插件地址:VAPTCHA手势验证码 - DCloud 插件市场 具体使用方式可访问插件地址自行查阅

Vue从零到实战

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小…

WEB前端03-CSS3基础

CSS3基础 1.CSS基本概念 CSS是Cascading Style Sheets(层叠样式表)的缩写,它是一种对Web文档添加样式的简单机制,是一种表现HTML或XML等文件外观样式的计算机语言,是一种网页排版和布局设计的技术。 CSS的特点 纯C…

R语言安装devtools包失败过程总结

R语言安装devtools包时,遇到usethis包总是安装失败,现总结如下方法,亲测可有效 一、usethis包及cli包安装问题 首先,Install.packages("usethis")出现如下错误,定位到是这个cli包出现问题 载入需要的程辑包…

永磁同步电机控制算法--基于 SVM 的无磁链环 DTC

永磁同步电机无磁链环 DTC 通过控制定子磁链交轴分量来直接控制转矩,不再要求控制磁链幅值恒定,省去了传统 DTC 中的磁链环,不仅转矩响应更快,有效抑制了转矩脉动,而且提高了电机功率因数。但无磁链环 DTC 方案仍采用传…

YOWOv2(yowov2)动作识别+Fastreid身份识别 详细安装与实现

首先yowov2是一款简单且实时的时空动作检测方案,fastreid是行人重识别(身份识别) yowov2介绍链接直达fastreid链接直达为时空动作检测任务设计实时框架仍然是一个挑战。YOWOv2 提出了一种新颖的实时动作检测框架,利用三维骨干和二…

【Js】导出 HTML 为 Word 文档

在 Web 开发中,有时我们希望用户能够将网页上的 HTML 内容保存为 Word 文档,以便更方便地分享和打印。 html样式 word文档 工具准备 1、 html-docx-js - npm html-docx-js是一个 JavaScript 库,用于将 HTML 内容转换为 Word 文档的格式。它…

在Linux系统实现瑞芯微RK3588部署rknntoolkit2进行模型转换

一、首先要先安装一个虚拟的环境 安装Miniconda包 Miniconda的官网链接:Minidonda官网 下载好放在要操作的linux系统,我用的是远程服务器的linux系统,我放在whl这个文件夹里面,这个文件夹是我自己创建的 运行安装 安装的操作都是yes就可以了 检查是否安装成功,输入下面…

【CEEMDAN-VMD-CNN-LSTM】双重分解+卷积神经网络+长短期记忆神经网络多变量回归预测,多变量输入模型

双重分解(Dual Decomposition)、卷积神经网络(Convolutional Neural Network,CNN)和长短期记忆神经网络(Long Short-Term Memory,LSTM)结合的多变量回归预测需要详细的实现和数据情况…

【香菇带你学Linux】Linux环境下gcc编译安装【建议收藏】

文章目录 0. 前言1. 安装前准备工作1.1 创建weihu用户1.2 安装依赖包1.2.1 安装 GMP1.2.2 安装MPFR1.2.3 安装MPC 2. gcc10.0.1版本安装3. 报错解决3. 1. wget下载报错 4. 参考文档 0. 前言 gcc(GNU Compiler Collection)是GNU项目的一部分,…

埋点系统如何统计用户的平均停留时长?

Hello,大家好,欢迎使用Webfunny前端监控和埋点系统。 今天,我们将介绍webfunny的埋点系统如何统计用户的平均停留时长 一、页面beforeLeave事件 当你页面离开的时候,会触发一个心跳检测,但是这个可能不是100%触发&am…

各向异性含水层中地下水三维流基本微分方程的推导(二)

各向异性含水层中地下水三维流基本微分方程的推导 参考文献: [1] 刘欣怡,付小莉.论连续性方程的推导及几种形式转换的方法[J].力学与实践,2023,45(02):469-474. 书接上回: 我们能得到三个方向的流入流出平衡方程: ∂ ρ u x ∂ x d x d y d…

Linux 下 redis 集群部署

目录 1. redis下载 2. 环境准备 3. redis部署 3.1 修改系统配置文件 3.2 开放端口 3.3 安装 redis 3.4 验证 本文将以三台服务器为例,介绍在 linux 系统下redis的部署方式。 1. redis下载 下载地址:Index of /releases/ 选择需要的介质下载&am…

【常见开发问题】阿里云无法登录的问题

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

【Python 项目】类鸟群:仿真鸟群

类鸟群:仿真鸟群 仔细观察一群鸟或一群鱼,你会发现,虽然群体由个体生物组成,但该群体作为一个整体似乎有它自己的生命。鸟群中的鸟在移动、飞越和绕过障碍物时,彼此之间相互定位。受到打扰或惊吓时会破坏编队&#xf…