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

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

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

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

let shopContactList = editForm.value.shopContacts.map(async (item: any) => {let middle: anyif (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: anyif (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: anyif (item.fileList.length && !item.wechatCodeImageID) {middle = await uploadImage(item.fileList[0])}shopContactList.push({name: item.name,phone: item.phone,wechatCodeImageID: middle,})}))

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

相关文章:

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

在场景:一个表格数据需要上传,每行表格需要上传图片->这就需要在提交时对数据也就是数组进行处理(先将每个元素图片上传拿到图片id 这种情况我刚开始就用的map处理,然后问题来了,提交的接口调用了,但是…...

最短路:spfa算法

最短路&#xff1a;spfa算法 题目描述参考代码![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/3be484da34a84911a0a7dab3f1d84945.png) 题目描述 参考代码 输入示例 3 3 1 2 5 2 3 -3 1 3 4输出示例 2#include <iostream> #include <cstring> #inc…...

算法笔记 图论和优先级队列的笔记

图论 DFS stack O(h) 不具有最短性 BFS queue O(2^h) 最短路 迪杰斯特拉算法 初始化&#xff1a; 将起始节点 A 的距离设为 0。将其他所有节点的距离设为无穷大。创建一个优先队列&#xff0c;并将起始节点 A 加入优先队列。 处理队列&#xff1a; …...

6.每日LeetCode-数组类,找到所有数组中消失的数字

题目 448找到所有数组中消失的数字.go 给你一个含 n 个整数的数组 nums &#xff0c;其中 nums[i] 在区间 [1, n] 内。请你找出所有在 [1, n] 范围内但没有出现在 nums 中的数字&#xff0c;并以数组的形式返回结果。 示例 1&#xff1a; 输入&#xff1a;nums [4,3,2,7,8,2,…...

【Three.js】知识梳理十:Three.js纹理贴图

1. 纹理贴图 在Three.js中&#xff0c;纹理贴图是一种将二维图像贴到三维物体表面的技术&#xff0c;以增强物体的视觉表现。纹理贴图可以使物体表面更加真实、细腻&#xff0c;为场景增色不少。 在Three.js中&#xff0c;纹理贴图的加载主要通过THREE.TextureLoader类实现。…...

mysql order by后跟case when

在SQL中&#xff0c;ORDER BY子句用于对查询结果进行排序。当在ORDER BY后面使用CASE语句时&#xff0c;它的原理是&#xff1a;根据CASE语句中定义的条件和结果&#xff0c;为查询结果集中的每一行生成一个临时的排序值。然后&#xff0c;根据这些排序值对结果集进行排序。 具…...

数字孪生赋能的智慧园区物联网云平台建设方案(97页PPT)

方案介绍&#xff1a; 本方案通过数字孪生技术赋能智慧园区物联网云平台&#xff0c;实现了园区的智能化管理、优化资源配置、提高运营效率等目标。同时提升园区的安全性、环保性和可持续性。最后&#xff0c;该方案还充分考虑了系统的可扩展性、安全性和可靠性&#xff0c;为…...

TikTok小店运营策略

TikTok&#xff0c;作为一款全球知名的短视频社交平台&#xff0c;其用户基数庞大且日活跃用户持续增长&#xff0c;为商家提供了巨大的商机。欧洲作为TikTok的重要市场之一&#xff0c;其小店功能为商家提供了一个展示和销售产品的新渠道。本文将探讨如何有效地运营TikTok小店…...

Docker面试整理-如何查看和管理Docker容器的日志?

管理和查看 Docker 容器的日志是 Docker 容器管理的重要部分,有助于监控应用的行为和诊断问题。Docker 提供了几种方法来查看和管理容器日志。 查看容器日志 要查看 Docker 容器的日志,你可以使用 docker logs 命令。这个命令会打印容器的 STDOUT 和 STDERR 输出,这是大多数…...

Java从放弃到继续放弃

并发编程 为什么需要多线程&#xff1f; 由于硬件的发展&#xff0c;CPU的核数增多&#xff0c;如果仍然使用单线程对CPU资源会造成浪费。同时&#xff0c;单线程也会出现阻塞的问题。所以&#xff0c;选择向多线程转变。 多线程的使用使得程序能够并行计算&#xff0c;提高计…...

上传文件生成聊天机器人,实现客服、办公自动化智能体 | Chatopera

从谈论聊天机器人&#xff0c;到谈论智能体&#xff0c;是目前人工智能最炙手可热的话题&#xff0c;这两年最大的变化是大语言模型的应用。聊天机器人曾经很难定制&#xff0c;往往局限于个别行业&#xff0c;同时也只有行业内的领导者、头部企业能定制。比如银行、金融证券、…...

SD3303A 大功率高亮度LED驱动芯片IC

一般描述 SD3303A是一款大功率高亮度LED驱动芯片,可以提供1A的电流驱动3W的LED。具有高效率&#xff0c;低功耗等特点&#xff0c;适用于电池供电的LED照明设备。 SD3303A具有开路保护和过温保护。 SD3303A需要使用两颗10uF(或者更大)的瓷片电容&#xff0c;来保…...

站易WordPress

站易WordPress是一家专业提供网站建设和运营服务的公司。他们提供的服务包括企业官方网站建设、网站运营维护、网站托管、网站优化、跨境独立站建站、外贸网站建设以及海外多语言网站建设等。 此外&#xff0c;站易还提供使用现成的WordPress模板&#xff0c;这样可以快速且低…...

windows下JDK1.8安装

windows下JDK1.8安装 本文假设你知道了解基本的windows系统操作。 在Windows系统下安装JDK 1.8&#xff08;Java Development Kit&#xff09;的步骤如下&#xff1a; 步骤1&#xff1a;下载JDK 1.8 打开浏览器并访问Oracle JDK下载页面。https://www.oracle.com/java/technol…...

怎么修改Visual Studio Code中现在github账号

git config --global user.name “你的用户名” git config --global user.email “你的邮箱” git config --global --list git push -u origin your_branch_name git remote add origin...

戴尔R720服务器(3)组RAID

今天收到7块硬盘&#xff0c;现在共有8块硬盘了&#xff0c;找了个视频学习了怎么使用阵列卡组RAID并记录。 ​​ ‍ 视频参考&#xff1a;【戴尔服务器添加RAID5热备盘hotspare】 ‍ 阵列卡组RAID5 开始 连接iDRAC控制台服务器开机按F2进入BIOS选择Device Settings​ ​​…...

eNSP学习——配置高级的访问控制列表

目录 主要命令 原理概述 实验目的 实验内容 实验拓扑 实验编址 实验步骤 1、基本配置 2、搭建OSPF网络 3、配置Telnet 4、配置高级ACL控制访问 需要eNSP各种配置命令的点击链接自取&#xff1a;华为&#xff45;NSP各种设备配置命令大全PDF版_ensp配置命令大全资源-…...

oracle的bitmap索引是什么

Oracle的Bitmap索引是一种特殊的索引类型&#xff0c;主要用于处理那些数值稀疏&#xff08;low-cardinality&#xff0c;低基数&#xff09;的字段&#xff0c;特别是那些值不经常改变的字段。以下是关于Bitmap索引的详细解释&#xff1a; 定义&#xff1a; Bitmap索引是一种…...

「前端+鸿蒙」鸿蒙应用开发-TS接口-特殊用途

在 TypeScript 中&#xff0c;接口除了定义对象的结构之外&#xff0c;还有一些特殊用途&#xff0c;这些用途使得接口成为一种灵活的工具&#xff0c;用于提高代码的可维护性和可扩展性。 TS快速入门-接口-特殊用途 1. 定义函数类型 接口可以用来定义函数的类型&#xff0c;…...

Centos7系统禁用Nouveau内核驱动程序【笔记】

在CentOS系统中&#xff0c;Nouveau是开源的NVIDIA显卡驱动程序&#xff0c;但它与NVIDIA的官方驱动程序NVIDIA Proprietary Driver存在兼容性问题。 如果你想要禁用Nouveau并使用NVIDIA官方驱动&#xff0c;可以按照以下步骤操作&#xff1a; 1、创建一个黑名单文件以禁用No…...

Vue 面试通杀秘籍

理论篇&#xff1a; 1. 说说对 Vue 渐进式框架的理解&#xff08;腾讯医典&#xff09; a) 渐进式的含义&#xff1a; 主张最少, 没有多做职责之外的事 b) Vue 有些方面是不如 React&#xff0c;不如 Angular.但它是渐进的&#xff0c;没有强主张&#xff0c; 你可以在原有…...

聚焦新版综合编程能力面试考查汇总

目录 一、业务性编程和广度能力考查 &#xff08;一&#xff09;基本定义 &#xff08;二&#xff09;必要性分析 二、高频考查样题&#xff08;编程扩展问法&#xff09; 考题1: 用java 代码实现一个死锁用例&#xff0c;说说怎么解决死锁问题&#xff1f;&#xff08;高…...

[工具探索]英寸vs毫米下常见尺寸排版

文章目录 常见尺寸1. 照片尺寸2. 纸张尺寸3. 显示器和电视屏幕尺寸4. 手机屏幕尺寸5. 笔记本电脑屏幕尺寸6. 其他设备尺寸 换算公式换算方法常见照片尺寸对比表国际标准ISO&#xff08;216&#xff09;纸张尺寸 什么是英寸&#xff1f; 英寸&#xff08;英语&#xff1a;inch&a…...

Mimio安装

mkdir -p /usr/local/develop/minio/bin mkdir -p /usr/local/develop/minio/bin wget https://dl.min.io/server/minio/release/linux-amd64/minio -O /usr/local/develop/minio/bin/minio 编辑脚本 启动脚本 vim /usr/local/develop/minio/start_minio.sh #!/bin/bash # 设…...

RawChat:优化AI对话体验,全面兼容GPT功能平台

文章目录 一、Rawchat简介1.1 RawChat的主要特性1.2 RawChat的技术原理简述 二、使用教程三、案例应用3.1 图片内容分析3.2 生图演示3.3 文档解析3.4 探索更多 四、小结 一、Rawchat简介 RawChat平台的诞生&#xff0c;其核心理念是降低用户访问类似ChatGPT这类先进AI服务的门…...

一文详解PaaS平台:机遇、挑战与新变革

随着信息化发展&#xff0c;数字技术与经济社会各个领域的融合逐渐深入&#xff0c;行业需求不断升级&#xff0c;逐渐呈现多样化、复杂性的态势。传统软件开发模式&#xff0c;耗时耗力&#xff0c;已经难以应对企业新形势下的业务需求。面对挑战&#xff0c;PaaS平台以其天然…...

Go每日一库之rotatelogs

介绍 Golang的rotatelogs库是一个用于日志轮转&#xff08;log rotation&#xff09;的库。日志轮转是一种常用的日志管理策略&#xff0c;它允许开发者将日志按照一定规则分割成多个文件&#xff0c;以便于管理和分析。通过使用rotatelogs库&#xff0c;开发者可以方便地实现…...

我的网络安全之路——一场诗意的邂逅

文章来源&#xff5c;MS08067 安全实验室 本文作者&#xff1a;tuooo 我的网络安全之路 一场诗意的邂逅 童年的星光中&#xff0c;我仰望着璀璨的荧屏&#xff0c;心怀对未知机器世界的浩瀚与好奇。那时的我&#xff0c;每每想到各种游戏的破解版本与工具&#xff0c;便会被技术…...

Android 中USB-HID协议实现

前言 所有通过USB连接android设备进行通讯的步骤都是大同小异&#xff1a;查询usb设备列表 ——>匹配对应的设备类型&#xff08;如productid , vendorId&#xff09;等——>连接usb设备&#xff0c;找到连接通讯的节点——>配置通讯信息&#xff0c;进行通讯。以上是…...

学习AI 机器学习,深度学习需要用到的python库

学习人工智能&#xff08;AI&#xff09;时&#xff0c;Python是最流行的编程语言之一。以下是一些常用的Python库和工具&#xff0c;它们可以帮助你入门并深入学习AI和机器学习&#xff1a; 数据处理和分析库 NumPy: 用于处理大型多维数组和矩阵运算&#xff0c;并提供数学函…...

网站app制作教程/品牌广告文案

Java中的计算主要有double,float,int,long,BigDecimal1、float和double主要用户科学计算和工程计算&#xff0c;它们执行二进制浮点运算&#xff0c;这是为了在广泛的数值范围上提供较为精确的快速近似计算而设计的。然而它们并没有提供完全精确的结果&#xff0c;所以不应该被…...

网站编程培训学校招生/搜索引擎优化文献

提交一个 服务器请求&#xff08;support request&#xff09; 然后在你的服务请求中同时提供下面的信息。 Confluence 服务器 登录 Confluence 然后访问管理员控制台。 将 系统信息&#xff08;System Information&#xff09;页面的中内容进行截图&#xff0c;或者保存页面为…...

简易博客网站模板下载/seo全网营销

为转载其他教程&#xff1a;https://www.runoob.com/w3cnote/zookeeper-leader.html zookeeper 的 leader 选举存在两个阶段&#xff0c;一个是服务器启动时 leader 选举&#xff0c;另一个是运行过程中 leader 服务器宕机。在分析选举原理前&#xff0c;先介绍几个重要的参数…...

政务网站建设管理工作总结/网络营销比较好的企业

解决方法&#xff1a; sudo apt-get install -f ​​​​转载于:https://www.cnblogs.com/wulinmenghuantejing/p/8378005.html...

如何做积分商城网站/软文营销写作技巧有哪些?

2019独角兽企业重金招聘Python工程师标准>>> Node 主要用在开发 Web 应用&#xff0c;koa 是目前 node 里最流行的 web 框架。 在 Node 开启一个 http 服务简直易如反掌,官网 demo。 const http require("http");const server http.createServer((req, …...

陆丰网站建设/百度收录时间

查看当前在那哪个数据库中 select database()修改 Student 表 AGE属性为 INT类型 可以是NULL ALTER TABLE Student MODIFY COLUMN AGE INT NULL添加一个新列&#xff08;新字段&#xff09; ALTER TABLE Student ADD NEWCOLUMN CHAR(10) NULL删除一列 &#xff08;一个字段&…...