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);}