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 中,Promise.all允许我们并行地处理多个Promise,并且在所有Promise都成功完成或其中任何一个失败时才返回结果。 1. 什么是Promise.all? Promise.all是一个静态方法,它接收一个Promise对象数组作为参数,…...
机器视觉_联合编程(二)
链接相机,加载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:用于生成 WebCrawler 的渐进式理解 Web 代理 Fudan University;Alibaba Holding-Aicheng Technology-Enterprise Abstract: 网络自动化是一项重要技术,它通过自动化常见的网络操作来完成复杂的网络任务,提高效率并…...

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

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

Flutter笔记:Widgets Easier组件库(9)使用弹窗
Flutter笔记 Widgets Easier组件库(9):使用弹窗 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite: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,控制面板没有显示出来,按照以下步骤处理: 1)删除残余文件 C:\Program Files\Microsoft Office C:\Program Files (x86)\Microsoft Office 2)删除残余注册表信息 计算机\HKEY_CL…...
python selenium 滑动后获取动态追加的元素
在使用Python的Selenium库进行网页自动化时,如果需要滑动页面并获取动态追加的元素,可以使用以下步骤: 使用Selenium定位到滑动条元素。 执行滑动操作,可以调用execute_script方法来模拟滑动。 使用WebDriverWait和expected_co…...

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

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

Android 文件传输
目录 device explorer 文件目录关系对应: device explorer 经常写adb命令传文件,结果发现Android studio有自带的文件管理器,可以上传下载文件。 tool windows ->device explorer 文件目录关系对应: 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 会话技术 两种会话:cookie,sessi…...

windows11忘记登录密码怎么办?
STEP1:进入Win RE界面 1.按住shift不要松手,点击重新启动,进入WINRE界面 2.选择疑难解答 选择高级选项 点击命令提示符 STEP2:替换utilman 1.输入以下代码查看所在windows所在盘 diskpart list volume exit 2.根据所在盘输入命令(以C盘为…...

C#里如何设置输出路径,不要net7.0-windows
官网介绍: 更改生成输出目录 - Visual Studio (Windows) | Microsoft Learn <PropertyGroup> <AppendTargetFrameworkToOutputPath>false</AppendTargetFrameworkToOutputPath> <AppendRuntimeIdentifierToOutputPath>false</Appen…...

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

第12章 软件测试基础(第三部分)测试类型、测试工具
七、测试类型(按工程阶段划分) 单集系确收 (一)单元测试 1、单元测试/模块测试 单元就是软件中最小单位(或模块)。可以是一个函数、一个过程、一个类。主要依据是模块的详细设计文档。价值在于尽早发现…...
open-vm-tools使用虚机的拷贝/粘切
open-vm-tools 是一组用于 VMware 虚拟机中的开源工具,它们提供了一些与虚拟机操作和管理相关的功能。这些工具与 VMware 虚拟化平台集成,可以在虚拟机中提供更好的性能和功能。以下是一些 open-vm-tools 提供的功能: 1. 虚拟机增强功能: open-vm-tools 提供了与 VMware 虚…...
CKEditor编辑器的简单使用方法,取值,赋值
先从官网下载包。CKEditor 4 - Download Latest Version. 一:在项目里引用JQ基础包和CK的JS包 <script src"/JS/jquery-3.4.1.js?v1.0"></script><script src"/ckeditor/ckeditor.js"></script> 二:在表…...

龙虎榜——20250610
上证指数放量收阴线,个股多数下跌,盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型,指数短线有调整的需求,大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的:御银股份、雄帝科技 驱动…...

Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性,不同版本的Docker对内核版本有不同要求。例如,Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本,Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

idea大量爆红问题解决
问题描述 在学习和工作中,idea是程序员不可缺少的一个工具,但是突然在有些时候就会出现大量爆红的问题,发现无法跳转,无论是关机重启或者是替换root都无法解决 就是如上所展示的问题,但是程序依然可以启动。 问题解决…...
R语言AI模型部署方案:精准离线运行详解
R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
前端倒计时误差!
提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法
深入浅出:JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中,随机数的生成看似简单,却隐藏着许多玄机。无论是生成密码、加密密钥,还是创建安全令牌,随机数的质量直接关系到系统的安全性。Jav…...

基于Flask实现的医疗保险欺诈识别监测模型
基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施,由雇主和个人按一定比例缴纳保险费,建立社会医疗保险基金,支付雇员医疗费用的一种医疗保险制度, 它是促进社会文明和进步的…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述:iview使用table 中type: "index",分页之后 ,索引还是从1开始,试过绑定后台返回数据的id, 这种方法可行,就是后台返回数据的每个页面id都不完全是按照从1开始的升序,因此百度了下,找到了…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

ardupilot 开发环境eclipse 中import 缺少C++
目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...