[Vue] After satisfying the "if" condition, why the "else" code is still running (when using the echart line chart with a large amount of data, the interface needs to be called repeatedly due to too much data) has been solved~

Bold Style ## Requirements:

Due to too much data, 2000 items are requested each time, and then the number of pages is +1, and the request is repeated until the returned data is empty, then no more requests are made.

problem appear

发现当返回数据为空时，还在请求，但页面显示是正确的

Code before modification

        updateChart(param) {
    
    
            getHumiture(param).then((res) => {
    
    
                let chartData = res.humitureList.content;
                let resDataObj = res
                if (chartData.length == 0) {
    
    
                   //数据为空时 直接退出函数 不再执行后面的代码
                    console.log(chartData.length, '数组为空')
                    return
                } else {
    
    
                    console.log(chartData.length, '++++++++++')
                    
                    this.maxId = chartData[chartData.length - 1].id;
                    this.tempList = this.generterChartData(resDataObj, chartData, "maxTemperature", 'minTemperature', "temperature");
                    this.humidityList = this.generterChartData(resDataObj, chartData, "maxHumidity", 'minHumidity', "humidity");
                    param.page = param.page + 1;
                    this.updateChart(param)
                }
            })

print result

Printing results can be found, when returning data 为空时, if执行了, butelse也执行了

reason

At the end of the investigation, I tried various methods, but it still didn't work. I finally looked at it and found that, from this, 接口返回速度
I guess ,当接口请求成功时，数据还有没被返回过来 is it possible that it has been repaid ?上次的请求没结束 下次的已经在排队延时的效果

Modified code

  data() {
    
    
        return {
    
    
            tempList: [], // 温度
            humidityList: [], //湿度
            xList: [], //横坐标
            humitureData: [], // 表格数据
            currentPage: 1, //当前页
            pageSize: 20, //每页显示条数
            chartPage: 0,
            chartSize: 2000, //图标请求条数
            deviceFormData: {
    
    
                time: [],
            },
            maxTempData: [],
            minTempData: [],//温度最小值折线数组
            minHumidityData: [],//湿度最小值折线数组
            maxHumidityData: [],
            chartDataMap: {
    
    },
            maxTemp: '',// 温度最大值
            minTemp: '',//温度最小值
            maxHumidity: '',//湿度最大值
            minHumidity: '',//湿度最小值
            flag: false
        };
  }
  
 async updateChart(param) {
    
    
            if (this.flag) {
    
    
                return
            }
            const res = await getHumiture(param)
            let chartData = res.humitureList.content;
            let resDataObj = res
            if (chartData.length != 0) {
    
    
                console.log(chartData.length, '1111111111++++++++++')
                this.tempList = this.generterChartData(resDataObj, chartData, "maxTemperature", 'minTemperature', "temperature");
                // 湿度
                this.humidityList = this.generterChartData(resDataObj, chartData, "maxHumidity", 'minHumidity', "humidity");
                param.page = param.page + 1;
                return this.updateChart(param)
            } else {
    
    
                console.log(22222);
                this.flag = true
            }
     },

print result

Looking at the printed result, it's cool. Why is it twice again, if执行了，else也执行了, but it is better than before modifying the code 当返回数据为空时，不会一直无限执行了, so continue to investigate and take a look接口请求的地方

发现接口只调用了一次，但打印打了两次, so infer, 打印有问题, the code is no problem ,

tips：

When developing, we fix bugs and when debugging code, 打印结果it will help us find problems, but we can’t just look at the print results. I have encountered several times when debugging. 打印结果出现问题At this time, we need to ensure our own There is no problem with the code. If the requirements are correct, the wrong printing results can be ignored~