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