【前端异步问题】通过Promise.all()解决异步取值问题

场景

有一个对象数组itemList,数组中的对象有的有属性attr,有的没有。没有属性a的对象需要通过调用接口获取并赋值给相应对象。
再将处理完后的对象数组,传入另一个接口中。

let itemList = [{ id: 0, attr: '雨伞'},{ id: 1, attr: null},{ id: 2, attr: '水杯'},{ id: 3, attr: null},{ id: 3, attr: '书包'}
]

代码

刚开始我的写法如下:

itemList.forEach(item => {if(!item.attr) {app.$http.get('url1',id).then(res => {item.attr = res.data.attr})}
})
console.log(itemList) // 此处能打印出我处理好的数组
app.$http.post('url2',{data:itemList})

这种情况下,接口会报错,说我传入的数据没有attr属性。是因为异步导致第一个接口可能没有处理完就调用了第二个接口。这个时候我们可以运用promise.all等遍历过程中所有的promise处理结束后再调用第二个接口,具体代码如下:

let promiseList = [] // 定义数组接收所有的promise
itemList.forEach(item => {if(!item?.attr){let itemPromise = app.$http.get('url1',id).then(res=>{item.attr = res.data.attr})promiseList.push(itemPromise)}
})
Promise.all(promiseList).then(()=>{app.$http.post('url2',{data:itemList}).then(res => {if(res.code===200){$message.success('success')}})
})

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

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

相关文章

【用户投稿】使用 SeaTunnel 进行 HTTP 同步到 Doris 实战经验分享

需求背景 由于我司的项目中需要接入不同的数据源的数据到数仓中,在选择了众多的产品中最后选择了Apache SeaTunnel,对比参考 目前我这边使用的接口,暂时没有接口认证,如果需要接口认证的方式接入数据,再做讨论及测试…

谈谈大数据采集和常见问题

01 什么是数据采集 数据采集是大数据的基石,不论是现在的互联网公司,物联网公司或者传统的IT公司,每个业务流程环节都会产生大量的数据,同时用户操作的日志也会产生大量的数据,为了将这些结构化和非结构化的数据进行…

[C/C++入门][for]24、菲波那契数列

斐波那契数列是数学中的一个经典数列,以其独特的递归性质而闻名。 数列的前两项通常是0和1(或者有时从1开始,当然这个不是强制要求),之后的每一项都是前两项的和。数列的前几项如下所示: 0, 1, 1, 2, 3, …

docker网络互联

最近学习docker的时候发现多了很多网卡,这些似乎都和docker有关,所以我便往下深入了解了一番; 一、docker网卡 docker 0是安装 docker 的时候生成的虚拟网桥,它在内核层连通了其他物理或者虚拟网卡,这就可以将所…

AI发展下的伦理挑战,应当如何应对?

AI发展下的伦理挑战,应当如何应对? 人工智能飞速发展的同时,也逐渐暴露出侵犯数据隐私、制造“信息茧房”等种种伦理风险。随着AI技术在社会各个领域的广泛应用,关于AI伦理和隐私保护问题日趋凸显。尽管国外已出台系列法规来规范…

常用优秀内网穿透工具(实测详细版)

文章目录 1、前言2、安装Nginx3、配置Nginx4、启动Nginx服务4.1、配置登录页面 5、内网穿透5.1、cpolar5.1.1、cpolar软件安装5.1.2、cpolar穿透 5.2、Ngrok5.2.1、Ngrok安装5.2.2、随机域名5.2.3、固定域名5.2.4、前后端服务端口 5.3、NatApp5.4、Frp5.4.1、下载Frp5.4.2、暴露…

自动发卡机器人来看:生成式AI的未来,是聊天还是代理?

引言 今天我们要聊聊一个有趣的话题:生成式AI的未来究竟是在聊天系统(Chat)中展现智慧,还是在自主代理(Agent)中体现能力? 一、生成式AI,你是谁? 首先,生成…

【数据结构】--- 栈和队列

前言 前面学习了数据结构的顺序表、单链表、双向循环链表这些结构;现在就来学习栈和队列,这里可以简单的说栈和队列是具有特殊化的线性表 一、栈 1.1、栈的概念和结构 栈是一种遵循先入后出逻辑的线性数据结构。 栈是一种特殊的线性表,它只允…

vivado FFT IP Core

文章目录 前言FFT IP 接口介绍接口简介tdata 格式说明 其他细节关于计算精度及缩放系数计算溢出架构选择数据顺序实时/非实时模式数据输入输出时序关于配置信息的应用时间节点 FFT IP 例化介绍控制代码实现 & 测试参考文献 前言 由于计算资源受限,准备将上位机 …

【漏洞复现】泛微E-Cology WorkflowServiceXml SQL注入漏洞

0x01 产品简介 泛微e-cology是一款由泛微网络科技开发的协同管理平台,支持人力资源、财务、行政等多功能管理和移动办公。 0x02 漏洞概述 泛微OAE-Cology 接口/services/WorkflowServiceXml 存在SQL注入漏洞,可获取数据库权限,导致数据泄露…

Qt日志库QsLog使用教程

前言 最近项目中需要用到日志库。上一次项目中用到了log4qt库,这个库有个麻烦的点是要配置config文件,所以这次切换到了QsLog。用了后这个库的感受是,比较轻量级,嘎嘎好用,推荐一波。 下载QsLog库 https://github.c…

【踩坑日记】【教程】嵌入式 Linux 通过 nfs 下载出现 T T T T [Retry count exceeded: starting again]

文章目录 1 本篇文章解决的问题2 问题解决原理3 问题环境4 开启 ubuntu-20.04 的 nfs24.1 确认 nfs2 是否已经开启4.2 开启 nfs2 5 卸载 iptables5.1 卸载 iptables5.2 禁用 ufw5.3 尝试重新下载 6 原理分析6.1 nfs2 开启部分6.2 卸载 iptables 部分 7 后记7.1 拓扑结构一7.2 拓…

生成Elasticsearch xpack安全认证证书

首次启动 Elasticsearch 时,会为用户生成密码,并自动为用户配置 TLS ,可以随时调整 TLS 配置,更新节点证书 一、生成证书 1、在任意节点上进入 Elasticsearch 的安装目录,使用 elasticsearch-certutil 为集群生成 CA…

【博士每天一篇文献-算法】连续学习算法之HNet:Continual learning with hypernetworks

阅读时间:2023-12-26 1 介绍 年份:2019 作者:Johannes von Oswald,Google Research;Christian Henning,EthonAI AG;Benjamin F. Grewe,苏黎世联邦理工学院神经信息学研究所 期刊&a…

npm 设置镜像

设置淘宝源 npm config set registry https://registry.npmmirror.com 设置阿里云源 npm config set registry https://npm.aliyun.com 设置腾讯云源 npm config set registry https://mirrors.cloud.tencent.com/npm/ 设置华为云源 npm config set registry https://mi…

嘿!openlayer(三)

嘿!openlayer(三) 第三章 面向对象的openlayer 文章目录 嘿!openlayer(三)前言一、面向对象的openlayer核心类渲染类事件类openlayer 主要工作原理数据组织数据解析数据渲染 二、直击深处OpenLayers 内部生…

【Vue3 ts】echars图表展示统计的月份数据

图片展示 此处内容为展示24年各个月份产品的创建数量。在后端统计24年各个月份产品数量后,以数组的格式发送给前端,前端负责展示。 后端 entity层: Data Schema(description "月份统计")public class MonthCount {private Stri…

处理uniapp刷新后,点击返回按钮跳转到登录页的问题

在使用uniapp的原生返回的按钮时,如果没有刷新会正常返回到对应的页面,如果刷新后会在当前页反复横跳,或者跳转到登录页。那个时候我第一个想法时:使用浏览器的history.back()方法。因为浏览器刷新后还是可以通过右上角的返回按钮…

01认识Java(介绍安装调试)

单元概述 本章主要介绍Java语言的发展历史,了解Java的运行原理及Java编程语言的特点,通过搭建Eclipse集成开发环境来运行Java应用程序。 1.1 Java简介 1.1.1 什么是Java 计算机语言是人与计算机之间的通讯语言,分为机器语言、汇编语言、高…

短视频是如何一步步“蚕食”我们大脑的?

点击上方△腾阳 关注 转载请联系授权 你好,我是腾阳。 今天我们将深入探讨短视频是如何「蚕食」我们的大脑。 首先问下自己,你有多久没有看完一篇长文了? 你是否曾在清晨阳光中,被手机屏幕上短视频图标吸引,而忘记…