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

js循环中发起请求数据不一致问题

项目场景:

在公司的一个项目中需要使用循环更改查询条件,然后查询子表数据,但是在查询过程中for下面的key变化了之后,查询中的key却并没有变化,导致查询的参数不一致,从未结果数据出错

     for(let i = 0;i<length;i++){let record = this.state.AllDate.CurvedataHVO_list.rows[i].valuesvar key = record.pk_curvedata.value// console.log(key)this.state.list.tablelist.tablelistRow = {values: record};this.querySlaveData({callback: (data) => {// console.log('发起请求')var mydata = {data}if ( !( key in this.state.chosedLine ) ) {//echarts表格var xValue = []var yValue = []for(const item  of  mydata.data.CurvedataBVO_sub.rows){yValue.push( (item.values.rate.value | 0 ) / 100)xValue.push( (item.values.term_days.value | 0) + '天' )}this.state.chosedLine[key] = [xValue,yValue,record.name.value]}else{delete this.state.chosedLine[key]}}})}


原因分析:

在循环过程中发起请求,因为请求有延迟,导致两次key取的是同一个数,所以最终数据出错


解决方案:

使用使用立即执行声明函数(IIFE)来确保请求中的 key 值与循环中的 key 值一致。

IIFE介绍:

IIFE(立即执行函数表达式)是一种在定义后立即执行的 JavaScript 函数。它通常用于创建一个私有的作用域,避免变量污染全局作用域,以及执行一些初始化操作。IIFE 的基本语法是将一个匿名函数包裹在圆括号中,然后紧接着的另一对圆括号会立即执行这个函数。

        for(let i = 0;i<length;i++){let record = this.state.AllDate.CurvedataHVO_list.rows[i].valuesvar key = record.pk_curvedata.value// console.log(key)this.state.list.tablelist.tablelistRow = {values: record};((record, key) => {this.querySlaveData({callback: (data) => {// console.log('发起请求')var mydata = {data}if ( !( key in this.state.chosedLine ) ) {//echarts表格var xValue = []var yValue = []for(const item  of  mydata.data.CurvedataBVO_sub.rows){yValue.push( (item.values.rate.value | 0 ) / 100)xValue.push( (item.values.term_days.value | 0) + '天' )}this.state.chosedLine[key] = [xValue,yValue,record.name.value]}else{delete this.state.chosedLine[key]}}});})(record, key);}

http://www.lryc.cn/news/129292.html

相关文章:

  • 工作流自动化:提升效率、节约成本的重要工具
  • 仿牛客论坛项目day7|Kafka
  • [SpringCloud] 组件性能优化技巧
  • okhttp下载文件 Java下载文件 javaokhttp下载文件 下载文件 java下载 okhttp下载 okhttp
  • Oracle/PL/SQL奇技淫巧之Json转表
  • 每日一学——网络安全
  • python中的lstm:介绍和基本使用方法
  • 【Flink】Flink窗口触发器
  • 深度云化时代,什么样的云网络才是企业的“心头好”?
  • 【快应用】快应用广告学习之激励视频广告
  • 国产化系统中遇到的视频花屏、卡顿以及延迟问题的记录与总结
  • go内存管理机制
  • 【Python】Web学习笔记_flask(5)——会话cookie对象
  • 用友U8+CRM 任意文件上传+读取漏洞复现
  • 【量化课程】08_1.机器学习量化策略基础实战
  • Mongodb 更新集合的方法到底有几种 (中) ?
  • 预演攻击:谁需要网络靶场,何时需要
  • 【Linux】IO多路转接——poll接口
  • 系统架构设计师---OSI七层协议
  • Next.js - Route Groups(路由组)
  • musl libc ldso 动态加载研究笔记:01
  • 2023 年 4 款适用于安卓手机的最佳 PDF 转 Word 转换器
  • 前端:运用html+css+jquery.js实现截图游戏
  • Maven之JDK编译问题
  • 开发测试框架一 - 创建springboot工程及基础操作
  • 【IMX6ULL驱动开发学习】08.马达驱动实战:驱动编写、手动注册平台设备和设备树添加节点信息
  • 直方图均衡化和自适应直方图均衡化
  • 京东门详一码多端探索与实践 | 京东云技术团队
  • 数据挖掘 | 零代码采集房源数据,支持自动翻页、数据排重等
  • 迪米特法则