当前位置: 首页 > news >正文

JavaScript 中的 Promise.all

在 JavaScript 中,Promise.all允许我们并行地处理多个Promise,并且在所有Promise都成功完成或其中任何一个失败时才返回结果。

1. 什么是Promise.all?

Promise.all是一个静态方法,它接收一个Promise对象数组作为参数,并返回一个新的Promise对象。这个新的Promise对象在传入的所有Promise对象都解决(resolve)时解决,或者其中一个Promise对象被拒绝(reject)时被拒绝。

2. 使用Promise.all的场景

2.1 并行请求

当我们需要同时发起多个异步请求,并且需要等待所有请求完成后再执行后续操作时,Promise.all就非常有用了。比如,在前端开发中,我们可能需要从不同的接口获取数据,然后在页面上展示这些数据,而且我们希望所有数据都加载完毕后再渲染页面,这时就可以使用Promise.all来管理多个异步请求。

2.2 同时处理多个文件上传

另一个常见的场景是同时处理多个文件上传。在Web开发中,我们经常需要让用户上传多个文件,然后将这些文件上传到服务器。使用Promise.all可以很方便地等待所有文件都上传成功后再执行后续操作,比如将上传成功后返回的文件ID与其他表单数据一起提交给后端。

3. Promise.all的使用示例

示例1,演示了如何使用Promise.all来并行处理多个异步请求:

const promises = [fetch('https://api.example.com/data1'),fetch('https://api.example.com/data2'),fetch('https://api.example.com/data3')
];Promise.all(promises).then(responses => Promise.all(responses.map(res => res.json()))).then(data => {// 处理返回的数据console.log('所有数据加载成功', data);}).catch(error => {// 处理错误console.error('发生错误', error);});

在这个示例中,我们创建了一个包含多个异步请求的Promise数组promises,并将它们传递给Promise.all。然后,我们使用.then链来处理所有请求的响应,确保在所有请求完成后再处理返回的数据。

示例2,场景:逐一上传文件,获取文件id。待全部上传完毕后,将ids和form表单一起上传。

submitFnc(form, fileList) {uni.showLoading({ title: "上传中…", mask: true });console.log("form", form); // form是一个对象表单console.log("files", fileList); // fileList是一个文件列表let ids = []; // 用于存储每个文件上传后返回的 idlet uploadPromises = []; // 创建一个 Promise 对象数组,用于存储每个文件上传的 Promise 对象// 循环遍历 fileList,为每个文件创建上传 Promise 对象并存储到数组中for (let i = 0; i < fileList.length; i++) {let file = fileList[i];let uploadPromise = new Promise((resolve, reject) => {uni.uploadFile({url: 'https://example.com/upload', // 上传文件的接口地址filePath: file.path, // 要上传文件资源的路径name: 'file', // 文件对应的 key,开发者在服务器端通过这个 key 可以获取到文件二进制内容formData: {}, // HTTP 请求中其他额外的formDatasuccess: (uploadFileRes) => { // 上传成功后的回调console.log(`第 ' + (${i} + 1) + ' 个文件(${file.name})上传成功.`, uploadFileRes.data);let id = uploadFileRes.data.id; // 假设服务器返回的 id 存在 data.id 中ids.push(id); // 将返回的 id 存储到 ids 数组中resolve(); // 将 Promise 对象标记为成功状态},fail: (error) => { // 上传失败后的回调console.error(`第 ' + (${i} + 1) + ' 个文件(${file.name})上传失败.`, error);reject(error); // 将 Promise 对象标记为失败状态}});});uploadPromises.push(uploadPromise); // 将上传 Promise 对象存储到数组中}// 使用 Promise.all 等待所有文件上传完成Promise.all(uploadPromises).then(() => {// 所有文件上传完成后接口({ ...this.baseFormData, ids: ids }).then((res) => {console.log("提交成功", res);this.showMessage("success", "提交成功");this.reset();}).catch((err) => {console.error("提交失败", err);this.showMessage("error", "提交失败");}).finally(() => {uni.hideLoading();})}).catch((error) => {uni.hideLoading();this.showMessage("error", "文件上传失败, 请重试");console.error('文件上传失败', error);});},

相关文章:

JavaScript 中的 Promise.all

在 JavaScript 中&#xff0c;Promise.all允许我们并行地处理多个Promise&#xff0c;并且在所有Promise都成功完成或其中任何一个失败时才返回结果。 1. 什么是Promise.all&#xff1f; Promise.all是一个静态方法&#xff0c;它接收一个Promise对象数组作为参数&#xff0c;…...

机器视觉_联合编程(二)

链接相机,加载tb,检测 FrameGrabber链接相机拍照 using System; using System.Collections; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tas…...

AUTOCRAWLER : A Progressive Understanding Web Agent for WebCrawler Generation

AUTOCRAWLER&#xff1a;用于生成 WebCrawler 的渐进式理解 Web 代理 Fudan University;Alibaba Holding-Aicheng Technology-Enterprise Abstract&#xff1a; 网络自动化是一项重要技术&#xff0c;它通过自动化常见的网络操作来完成复杂的网络任务&#xff0c;提高效率并…...

php使用服务器端和客户端加密狗环境部署及使用记录(服务器端windows环境下部署、linux环境宝塔面板部署、客户端部署加密狗)

php使用服务器端和客户端加密狗环境部署及使用记录 ViKey加密狗环境部署1.windows环境下部署开发文档验证代码提示Fatal error: Class COM not found in 2.linux环境下部署&#xff08;宝塔面板&#xff09;开发文档验证代码提示Fatal error: Uncaught Error: Call to undefine…...

Android selinux权限

一.SE 概述 SELinux 是由美国NSA&#xff08;国安局&#xff09;和 SCC 开发的 Linux的一个扩张强制访问控制安全模块。原先是在Fluke上开发的&#xff0c;2000年以 GNU GPL 发布。从 fedora core 2开始&#xff0c; 2.6内核的版本都支持SELinux。 在 SELinux 出现之前&#…...

Flutter笔记:Widgets Easier组件库(9)使用弹窗

Flutter笔记 Widgets Easier组件库&#xff08;9&#xff09;&#xff1a;使用弹窗 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress o…...

【解决Android Studio】cmake报错找不到vulkan包

1 报错信息 CMake Error at D:/Android/project/cmake/3.10.2.4988404/share/cmake-3.10/Modules/FindPackageHandleStandardArgs.cmake:137 (message): Could NOT find Vulkan (missing: Vulkan_LIBRARY) Call Stack (most recent call first): 2. 错误原因 minSdk版本不对&am…...

手动卸载32 位office

首先通过控制面板或软件管家卸载office&#xff0c;控制面板没有显示出来&#xff0c;按照以下步骤处理&#xff1a; 1&#xff09;删除残余文件 C:\Program Files\Microsoft Office C:\Program Files (x86)\Microsoft Office 2&#xff09;删除残余注册表信息 计算机\HKEY_CL…...

python selenium 滑动后获取动态追加的元素

在使用Python的Selenium库进行网页自动化时&#xff0c;如果需要滑动页面并获取动态追加的元素&#xff0c;可以使用以下步骤&#xff1a; 使用Selenium定位到滑动条元素。 执行滑动操作&#xff0c;可以调用execute_script方法来模拟滑动。 使用WebDriverWait和expected_co…...

【idea-sprongboot项目】在linux服务器上纯远程开发方式

继上一篇博客【idea-sprongboot项目】SSH连接云服务器进行远程开发-CSDN博客 目录 五、远程开发方式 2&#xff09;纯远程开发方式 步骤 五、远程开发方式 2&#xff09;纯远程开发方式 实现原理&#xff0c; 步骤 &#xff08;1&#xff09;首先&#xff0c;关闭当前正在…...

ADC模-数转换原理与实现

1. 今日摸鱼计划 今天来学习一下ADC的原理&#xff0c;然后把ADC给实现 ADC芯片:ADC128S102 视频&#xff1a; 18A_基于SPI接口的ADC芯片功能和接口时序介绍_哔哩哔哩_bilibili 18B_使用线性序列机思路分析SPI接口的ADC芯片接口时序_哔哩哔哩_bilibili 18C_基于线性序列机的S…...

Android 文件传输

目录 device explorer 文件目录关系对应&#xff1a; device explorer 经常写adb命令传文件&#xff0c;结果发现Android studio有自带的文件管理器&#xff0c;可以上传下载文件。 tool windows ->device explorer 文件目录关系对应&#xff1a; Android java获取的程序…...

一起深度学习

CIFAR-10 卷积神经网络 下载数据集构建网络运行测试 下载数据集 batchsz 32cifar_train datasets.CIFAR10(data,trainTrue,transformtorchvision.transforms.Compose([torchvision.transforms.Resize((32,32)),torchvision.transforms.ToTensor()]),downloadTrue)cifar_train …...

servlet-会话(cookie与session)

servlet会话技术 会话技术cookie创建Cookieindex.jspCookieServlet 获取Cookieindex.jspshowCookie session创建sessionindex.jsplogin.jspLoginServlet 获取sessionRedurectServket 清除会话login.jspClearItmeServlet 会话技术 两种会话&#xff1a;cookie&#xff0c;sessi…...

windows11忘记登录密码怎么办?

STEP1&#xff1a;进入Win RE界面 1.按住shift不要松手,点击重新启动&#xff0c;进入WINRE界面 2.选择疑难解答 选择高级选项 点击命令提示符 STEP2:替换utilman 1.输入以下代码查看所在windows所在盘 diskpart list volume exit 2.根据所在盘输入命令&#xff08;以C盘为…...

C#里如何设置输出路径,不要net7.0-windows

官网介绍&#xff1a; 更改生成输出目录 - Visual Studio (Windows) | Microsoft Learn <PropertyGroup> <AppendTargetFrameworkToOutputPath>false</AppendTargetFrameworkToOutputPath> <AppendRuntimeIdentifierToOutputPath>false</Appen…...

知名员工上网行为管理系统推荐榜单

上网行为管理软件旨在帮助组织监控和管理员工的网络活动&#xff0c;以提高工作效率、确保网络安全和合规性。以下是一些常见的上网行为管理软件&#xff1a; Ping32&#xff1a;Ping32是一款专业的员工上网行为管理系统&#xff0c;Ping32作为一款专业的员工上网行为管理系统&…...

第12章 软件测试基础(第三部分)测试类型、测试工具

七、测试类型&#xff08;按工程阶段划分&#xff09; 单集系确收 &#xff08;一&#xff09;单元测试 1、单元测试/模块测试 单元就是软件中最小单位&#xff08;或模块&#xff09;。可以是一个函数、一个过程、一个类。主要依据是模块的详细设计文档。价值在于尽早发现…...

open-vm-tools使用虚机的拷贝/粘切

open-vm-tools 是一组用于 VMware 虚拟机中的开源工具,它们提供了一些与虚拟机操作和管理相关的功能。这些工具与 VMware 虚拟化平台集成,可以在虚拟机中提供更好的性能和功能。以下是一些 open-vm-tools 提供的功能: 1. 虚拟机增强功能: open-vm-tools 提供了与 VMware 虚…...

CKEditor编辑器的简单使用方法,取值,赋值

先从官网下载包。CKEditor 4 - Download Latest Version. 一&#xff1a;在项目里引用JQ基础包和CK的JS包 <script src"/JS/jquery-3.4.1.js?v1.0"></script><script src"/ckeditor/ckeditor.js"></script> 二&#xff1a;在表…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

聊一聊接口测试的意义有哪些?

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

Java求职者面试指南:Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...

spring Security对RBAC及其ABAC的支持使用

RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型&#xff0c;它将权限分配给角色&#xff0c;再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...

【FTP】ftp文件传输会丢包吗?批量几百个文件传输,有一些文件没有传输完整,如何解决?

FTP&#xff08;File Transfer Protocol&#xff09;本身是一个基于 TCP 的协议&#xff0c;理论上不会丢包。但 FTP 文件传输过程中仍可能出现文件不完整、丢失或损坏的情况&#xff0c;主要原因包括&#xff1a; ✅ 一、FTP传输可能“丢包”或文件不完整的原因 原因描述网络…...

【Kafka】Kafka从入门到实战:构建高吞吐量分布式消息系统

Kafka从入门到实战:构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台,最初由LinkedIn开发,后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理,能够处理来自多个生产者的海量数据,并将这些数据实时传递给消费者。 Kafka核心特…...