前端如何判断多个请求完毕

在这里插入图片描述

在前端开发中,经常会遇到需要同时发起多个异步请求,并在所有请求都完成后再进行下一步操作的情况。

这里有几个常用的方法来实现这一需求:

使用 Promise.all()
Promise.all() 方法接收一个 Promise 对象的数组作为参数,当所有的 Promise 对象的状态都变为 resolved 或者只要有一个变为 rejected 时,Promise.all() 返回的 Promise 实例就会结束。

示例代码

const request1 = fetch('https://api.example.com/data1');
const request2 = fetch('https://api.example.com/data2');
const request3 = fetch('https://api.example.com/data3');Promise.all([request1, request2, request3]).then(responses => Promise.all(responses.map(r => r.json()))).then(results => {// 所有请求完成,处理结果console.log(results);}).catch(error => {// 如果任何一个请求失败,则捕获错误console.error('An error occurred:', error);});

使用 Promise.allSettled()

Promise.allSettled() 方法类似于 Promise.all(),但它等待所有的 Promise 都完成(无论成功还是失败),并且返回一个包含每个 Promise 的结果的对象数组。

示例代码

const request1 = fetch('https://api.example.com/data1');
const request2 = fetch('https://api.example.com/data2');
const request3 = fetch('https://api.example.com/data3');Promise.allSettled([request1, request2, request3]).then(results => {// 所有请求完成,处理结果results.forEach(result => {if (result.status === 'fulfilled') {console.log('Success:', result.value);} else {console.error('Failed:', result.reason);}});});

使用 Promise.race()

Promise.race() 方法接收一个 Promise 对象的数组作为参数,当数组中的任意一个 Promise 首次变为 resolved 或 rejected 时,Promise.race() 返回的 Promise 实例就会结束。

这种方法主要用于检测最快完成的请求,但如果目的是等待所有请求完成,则不太适用。

示例代码

const request1 = fetch('https://api.example.com/data1');
const request2 = fetch('https://api.example.com/data2');
const request3 = fetch('https://api.example.com/data3');Promise.race([request1, request2, request3]).then(response => {// 最快完成的请求response.json().then(data => console.log('Fastest request data:', data));}).catch(error => {// 如果任何一个请求失败,则捕获错误console.error('An error occurred:', error);});

使用循环和递归
如果需要更灵活地控制请求的顺序或者在请求之间添加额外的逻辑,可以使用循环和递归来依次处理每个请求。

示例代码

const requests = [fetch('https://api.example.com/data1'),fetch('https://api.example.com/data2'),fetch('https://api.example.com/data3')
];let results = [];function processNextRequest(index) {if (index >= requests.length) {console.log('All requests completed:', results);return;}requests[index].then(response => response.json()).then(data => {results.push(data);processNextRequest(index + 1);}).catch(error => {console.error('Error processing request:', error);});
}processNextRequest(0);

使用 async/await

在现代浏览器中,可以使用 async/await 来编写更简洁的代码。结合 Promise.all() 或者循环和递归来处理多个请求。

示例代码

async function fetchAllData() {try {const [response1, response2, response3] = await Promise.all([fetch('https://api.example.com/data1'),fetch('https://api.example.com/data2'),fetch('https://api.example.com/data3')]);const [data1, data2, data3] = await Promise.all([response1.json(),response2.json(),response3.json()]);console.log('All data:', data1, data2, data3);} catch (error) {console.error('An error occurred:', error);}
}fetchAllData();

使用库和框架提供的工具

许多现代前端库和框架(如 Axios、React Query、VueUse 等)提供了更高级的功能来处理多个请求,例如自动重试、缓存、取消等。

示例代码 (使用 Axios)

import axios from 'axios';async function fetchAllData() {try {const [data1, data2, data3] = await axios.all([axios.get('https://api.example.com/data1'),axios.get('https://api.example.com/data2'),axios.get('https://api.example.com/data3')]);console.log('All data:', data1.data, data2.data, data3.data);} catch (error) {console.error('An error occurred:', error);}
}fetchAllData();

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

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

相关文章

云备份项目--服务端编写

文章目录 7. 数据管理模块7.1 如何设计7.2 完整的类 8. 热点管理8.1 如何设计8.2 完整的类 9. 业务处理模块9.1 如何设计9.2 完整的类9.3 测试9.3.1 测试展示功能 完整的代码–gitee链接 7. 数据管理模块 TODO: 读写锁?普通锁? 7.1 如何设计 需要管理…

什么是打流,怎么用iperf3打流

什么是打流 在网络安全和黑灰产领域,“打流”具有不同的含义,常用于形容通过技术手段制造流量假象或发起流量攻击。 流量攻击(DDoS)中的“打流”: “打流”指向目标服务器或网络发起 大规模的数据请求,造…

exam0-试卷整理

exam0-试卷整理 2010,2013是梦开始的地方,大概率会出原题的 2010 2013 2015 大题 manchester RIP更新 说出ISO与TCP/IP模型的相同点和不同点(8分) 相似: 两者都有层次,网络专业人员都需要知道二者&a…

数据挖掘入门介绍及代码实战

什么是数据挖掘? 数据挖掘(Data Mining)是从大量数据中通过算法和技术提取有价值知识的过程,常被称为“从数据中发现知识”(KDD,Knowledge Discovery in Databases)。它包括从数据库中发现隐藏…

ACL---访问控制列表---策略

在路由器流量流入或者流出的接口上匹配流量,之后执行设定好的动作---permit(允许)deny(拒绝) 1.访问控制: 在路由器流量流入或者流出的接口上匹配流量,之后执行设定好的动作---permit&#xf…

element输入框及表单元素自定义前缀

如图所示&#xff1a; <el-input class"custom-input" placeholder"请输入" prefix-icon"prefix" v-model"form.name" clearable></el-input> :deep(.custom-input) {.el-input__icon {display: inline-block;width: 40…

C#调用Lua

目录 xLua导入 打包工具导入 单例基类导入与AB包管理器导入 Lua解析器 文件加载与重定向 Lua解析器管理器 全局变量获取 全局函数获取 对于无参数无返回值 对于有参数有返回值 对于多返回值 对于变长参数 完整代码 List与Dictionary映射Table 类映射Table 接口映射…

第13章 汇编语言--- 实践项目:简单的计算器

汇编语言是一种低级编程语言&#xff0c;它几乎是一对一地对应于计算机的机器码指令。编写汇编代码时&#xff0c;程序员需要直接处理硬件资源如寄存器和内存地址。下面我将为你概述如何创建一个简单的计算器程序&#xff0c;并提供一些伪代码作为示例。 项目目标 设计一个简…

【能用】springboot集成netty,解码器处理数据过长的问题

netty解码器处理数据过长的问题 处理数据过长的详细流程 当第一次 decode 调用时&#xff0c;如果数据不完整&#xff0c;decode 方法会直接返回&#xff0c;Netty 会保留 ByteBuf 中的数据。后续数据到达时&#xff0c;会再次调用 decode 方法&#xff0c;ByteBuf 会累积新到…

渗透测试-非寻常漏洞案例

声明 本文章所分享内容仅用于网络安全技术讨论&#xff0c;切勿用于违法途径&#xff0c;所有渗透都需获取授权&#xff0c;违者后果自行承担&#xff0c;与本号及作者无关&#xff0c;请谨记守法. 此文章不允许未经授权转发至除先知社区以外的其它平台&#xff01;&#xff0…

Python下载包缓慢时怎么修改镜像源

前言 在使用Python下载第三方包时&#xff0c;有时会比较缓慢&#xff0c;与Linux环境中下载软件一样可以替换软件源一样&#xff0c;Python下载源也可以进行修改&#xff0c;因为总是记不住镜像地址&#xff0c;特此记录一下。 常用镜像 豆瓣镜像&#xff1a; https://pypi.…

df.groupby(pd.Grouper(level=1)).sum()

df.groupby(pd.Grouper(level1)).sum() 在 Python 中的作用是根据 DataFrame 的某一索引级别进行分组&#xff0c;并计算每个分组的总和。具体来说&#xff1a; df.groupby(...)&#xff1a;这是 pandas 的分组操作&#xff0c;按照指定的规则将 DataFrame 分组。 pd.Grouper(…

CentOS修改docker镜像存储位置并进行数据迁移

在 CentOS 上修改 Docker 镜像存储位置并进行数据迁移是一个常见的需求。以下是一个详细的步骤指南&#xff0c;帮助你完成这个任务。 1. 停止 Docker 服务 首先&#xff0c;确保 Docker 服务已经停止&#xff0c;以避免在迁移过程中出现数据损坏。 sudo systemctl stop doc…

node.js之---事件循环机制

事件循环机制 Node.js 事件循环机制&#xff08;Event Loop&#xff09;是其核心特性之一&#xff0c;它使得 Node.js 能够高效地处理大量并发的 I/O 操作。Node.js 基于 非阻塞 I/O&#xff0c;使用事件驱动的模型来实现异步编程。事件循环是 Node.js 实现异步编程的基础&…

基于深度学习的视觉检测小项目(二) 环境和框架搭建

一、环境和框架要求 SAM的环境要求&#xff1a; Python>3.7 PyTorch>1.7 torchvision>0.8 YOLO V8的环境要求&#xff1a;YOLO集成在ultralytics库中&#xff0c;ultralytics库的环境要求&#xff1a; Python>3.7 PyTorch>1.10.0 1、确定pytorch版本…

MySQL 06 章——多表查询

多表查询&#xff0c;也称为关联查询&#xff0c;是指两个表或多个表一起完成查询操作 前提条件&#xff0c;这些一起查询的表之间是有关系的&#xff08;一对一、一对多&#xff09;&#xff0c;它们之间一定是有关联字段的。这个关联字段可能建立了外键&#xff0c;也可能没…

ubuntu初始配置

ubuntu初始配置 vm下ubuntu安装vmtools安装常用工具ubuntu终端美化安装ssh使用apt安装时出现错误解决办法 vm下ubuntu安装vmtools //安装vmtools sudo apt-get install open-vm-tools //桌面组件提供了更好的集成体验&#xff0c;包括拖放文件和共享剪贴板等功能 sudo apt-get…

Web前端基础知识(五)

盒子模型 盒子模型是CSS中一种常用于布局的基本概念。描述了 文档中的每个元素都可以看成是一个矩形的盒子&#xff0c;包含了内容、内边距、文本边距、外边距。 ---------------------------------------------------------------------------------------------------------…

人工智能之机器学习算法

所有的机器学习算法都是要优化的&#xff0c;优化的必要条件是确定优化的目标函数(损失函数)&#xff0c;目标函数是根据实际问题(数据)转成的数学公式。 一.线性回归原理推导 &#xff08;1&#xff09;回归问题概述 在机器学习的有监督算法中&#xff0c;分类与回归二种情…

使用Clion在ubuntu上进行交叉编译,并在Linux上远程编译五子棋

目录 1.工具以及概念介绍 &#xff08;1&#xff09;Clion软件简介 &#xff08;2&#xff09;交叉编译 &#xff08;3&#xff09;远程编译 2.操作原理 3.详细操作步骤 &#xff08;1&#xff09;配置Clion与虚拟机ubuntu的ssh连接 CLion远程开发Ubuntu&#xff0c;并显…