在调用接口上map与forEach的区别

news2024/11/15 13:41:19

在场景:一个表格数据需要上传,每行表格需要上传图片->这就需要在提交时对数据也就是数组进行处理(先将每个元素图片上传拿到图片id

这种情况我刚开始就用的map处理,然后问题来了,提交的接口调用了,但是上传图片的接口没调用,用了async await也没用

let shopContactList = editForm.value.shopContacts.map(async (item: any) => {
        let middle: any
        if (item.fileList.length && !item.wechatCodeImageID) {
            middle = await uploadImage(item.fileList[0])
        }
        return {
            name: item.name,
            phone: item.phone,
            wechatCodeImageID: middle,
        }
    })

->然后我就用了forEach去处理

 let shopContactList: any = []

    editForm.value.shopContacts.forEach(async (item: any) => {
        let middle: any
        if (item.fileList.length && !item.wechatCodeImageID) {
            middle = await uploadImage(item.fileList[0])
        }
        shopContactList.push({
            name: item.name,
            phone: item.phone,
            wechatCodeImageID: middle,
        })
    })

虽然上传图片接口调用了,提交的数据打印出来也有,but->提交接口传递的数据没用,这就很无语,原因:uploadImage 函数是异步的,可能会导致在 formEl.validate 的回调函数执行之前,shopContactList 还没有被填充。所以->修改为(使用 Promise.all 来等待所有异步操作完成,然后再执行 formEl.validate):

    let shopContactList: any = []
    await Promise.all(
        editForm.value.shopContacts.map(async (item: any) => {
            let middle: any
            if (item.fileList.length && !item.wechatCodeImageID) {
                middle = await uploadImage(item.fileList[0])
            }
            shopContactList.push({
                name: item.name,
                phone: item.phone,
                wechatCodeImageID: middle,
            })
        })
    )

,这里又为啥不用forEach呢,因为 forEach 方法不会等待异步操作,就报这个错误:undefined是不可迭代的

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

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

相关文章

linux搭建harbor镜像仓库

安装docker-compose:安装docker-compose_安装 docker-compose-CSDN博客 安装harbor,我安装的是v2.4.3 #下载安装包 wget https://github.com/goharbor/harbor/releases/download/v2.4.3/harbor-offline-installer-v2.4.3.tgz#解压 tar -zxvf harbor-off…

【Python】selenium的异常类selenium.common.exceptions的汇总

我们在使用selenium爬虫的过程中,可能会遇到各种报错,例如: 这些报错是selenium.common.exceptions 是 Selenium WebDriver 库中的一个模块,它包含了 WebDriver 操作中可能遇到的各种异常类。这些异常类帮助开发者在自动化测试过…

Nodejs 第七十七章(MQ高级)

MQ介绍和基本使用在75章介绍过了,不再重复 MQ高级用法-延时消息 什么是延时消息? Producer 将消息发送到 MQ 服务端,但并不期望这条消息立马投递,而是延迟一定时间后才投递到 Consumer 进行消费,该消息即延时消息 插件安装 R…

el-tree回显复选框时半选中和全选中的树

项目需求如下:当我点击“编辑”后,需要在tree树上全勾中和半勾中选项,由于后端接口返回的tree树是含了父级节点id的数组集合,所以我们回显时需要处理好这个全勾中和半勾中的问题。 主要思路如下,我们通过setData方法获…

服务器数据恢复—热备盘未完全启用导致raid5阵列崩溃的数据恢复案例

服务器存储故障: 一台EMC某型号存储由于存储中raid5阵列出现故障导致服务器崩溃,由于数据涉密,需要工程师到现场恢复数据。 服务器数据恢复工程师到现场后对数据进行检测,经过检测发现服务器崩溃是由于raid中某些硬盘掉线所导致。…

【深度学习】数竹签演示软件系统

往期文章列表: 【YOLO深度学习系列】图像分类、物体检测、实例分割、物体追踪、姿态估计、定向边框检测演示系统【含源码】 【深度学习】物体检测/实例分割/物体追踪/姿态估计/定向边框/图像分类检测演示系统【含源码】 【深度学习】YOLOV8数据标注及模型训练方法整…

meilisearch的Managing API keys,自己趟过的坑

Elasticsearch 做为老牌搜索引擎,功能基本满足,但复杂,重量级,适合大数据量。 MeiliSearch 设计目标针对数据在 500GB 左右的搜索需求,极快,单文件,超轻量。 所以,对于中小型项目来说…

电商比价系统的搭建需要哪些方面着手准备?

搭建一个淘宝/京东比价系统所需的时间取决于多个因素,包括但不限于系统的复杂度、开发团队的规模与经验、数据源获取的难易程度、技术选型等。以下是一个大致的时间估计和考虑因素: 需求分析与设计: 确定系统的主要功能,如商品搜…

Python基于 GPU 的机器学习算法库之cuml使用详解

概要 在大数据和机器学习的时代,高效的数据处理和模型训练变得尤为重要。传统的 CPU 计算方式在处理大规模数据时往往显得力不从心,而 GPU 的并行计算能力为此提供了一种解决方案。cuml 是 RAPIDS AI 项目的一部分,它提供了一组基于 GPU 的机器学习算法,能够极大地提升数据…

【数据结构与算法】哈夫曼树与哈夫曼编码

文章目录 哈夫曼树(最优二叉树)定义举个🌰(WPL的计算) 哈夫曼树的构造(最优二叉树的构造)举个🌰 哈夫曼编码定义构造 哈夫曼树(最优二叉树) 在介绍哈夫曼树之…

中间件复习之-分布式存储系统

单机存储系统介绍 存储引擎:存储系统的发动机,提供数据的增、删、改、查能力,直接决定存储系统的功能(支持怎么样的查询,锁能锁到什么程度)和性能(增删改查速度)。 性能因素 写入方…

1939springboot VUE 高等院校求职信息管理系统开发mysql数据库web结构java编程计算机网页源码maven项目前后端分离

一、源码特点 springboot VUE高等院校信息(求职)管理系统是一套完善的完整信息管理类型系统 前后端分离,结合springboot框架和VUE完成本系统,对理解vue java编程开发语言有帮助系统采用springboot框架(MVC模式开发&a…

Spring Cloud全家桶(上)【Nacos、OpenFeign、LoadBalancer、GateWay、金丝雀灰色发布】

0.零基础入门微服务实战课 1.微服务和 Spring Cloud1.1 什么是微服务?1.2 什么是 Spring Cloud?1.3 微服务 VS Spring Cloud 2.为什么要学微服务?3.Spring Cloud 组件介绍1.什么是 Nacos?1.1 Nacos 功能1.1.1 配置中心1.1.2 注册中心 1.2 Na…

29、shell变量、重定向及运算符

一、shell脚本 1.1、shell的定义 脚本:可运行的代码的集合,脚本语言(计算机语言)。 脚本的特点:从上到下,按行执行。 python:脚本语言 格式更严谨的执行缩进。也是从上到下按行执行。 shel…

正式发布 | 极海首款GHD3440电机专用栅极驱动器,构建多元电机产品矩阵

​栅极驱动器是低压控制器和高功电路之间的缓冲电路,用于放大控制器的控制信号,从而实现功率器件更有效的导通和关断。随着各种智能电子设备的不断普及和应用,栅极驱动器的市场需求也在不断增加。据国际权威研究机构Yole Group预计&#xff0…

元灵诀 逆天纪系统搭建 零撸看广告升级模式 定制开发

在当今互联网飞速发展的时代,元灵诀逆天纪系统的出现无疑为游戏行业注入了新的活力。这款系统不仅是一个定制开发的youxiu作品,更是对游戏产业的一次深度思考和探索。其独特的零撸看广告升级模式,将游戏体验和商业模式完美结合,开…

HoloLens2系列讲解 - 05 HoloLens2 Appx 安装

安装准备 Hololens2设备打包好的Appx文件一台电脑Hololens2 和电脑需要处于同一局域网 安装Appx 1.在Hololens设备上点击设置->网络和Internet->选择“自己wifi名称”网络并点击自动连接。 2.查看HoloLens的IP地址,如192.168.0.1。 (1&#xff…

【Go语言】面向对象编程(二):通过组合实现类的继承和方法重写

通过组合实现类的继承和方法重写 要实现面向对象的编程,就必须实现面向对象编程的三大特性:封装、继承和多态。 1 封装 类的定义及其内部数据的定义可以看作是类的属性,基于类定义的函数方法则是类的成员方法。 2 继承 Go 语言中&#x…

微软将 AI 工具和软件的研发工作外包给 OpenAI

微软将 AI 工具和软件的研发工作外包给 OpenAI 科技媒体 CNBC 报道称,微软正计划将其人工智能(AI)工具和软件的开发工作外包给OpenAI,这对竞争对手谷歌来说无疑是一个利好消息。 Okta首席执行官Todd McKinnon表示,微…

【浏览器清空证书】

chrome://net-internals/#hsts 在地址栏输入并访问:chrome://net-internals/#hsts