分享心得:vue接口调用赋值

写的远远不够好,但是在一点点进步吖      < _ >

刚开始写接口调用的时候,只知道在data里声明一个变量,async 搭配await调接口拿回数据,通过code的判断,就直接把数据赋值给data的变量了

现在,会进行一轮又一轮的判断同时学会了使用局部变量进行控制,看代码👇

以前的代码:

async StatisticsPlanChartStatus() {
      const search = {
        startTime: this.search.startTime
          ? `${this.search.startTime} 00:00:00`
          : null,
        endTime: this.search.endTime ? `${this.search.endTime} 23:59:59` : null,
      };
      const { code, data = [] } = await StatisticsPlanChartStatusApi(search);
      if (code === 200 || code === "200") {
        this.option2.series[1].data = data.map((item) => ({
          value: item.count,
          name: item.value,
        }));
        this.echarts2.setOption(this.option2);
      } else this.echarts2.clear();
    },

现在的代码:

async StatisticsPlanChartStatus() {
      const search = {
        startTime: this.search.startTime
          ? `${this.search.startTime} 00:00:00`
          : null,
        endTime: this.search.endTime ? `${this.search.endTime} 23:59:59` : null,
      };
      //   局部变量
      const seriesData = [];
      const { code, data = [] } = await StatisticsPlanChartStatusApi(search);
      if (code === 200 || code === "200") {
        if (data && data.length) {
          for (const item of data) {
            //   局部变量赋值
            seriesData.push({
              value: item.count,
              name: item.value,
            });
          }
        }
      }
      if (seriesData && seriesData.length) {
        //   全局变量赋值
        this.option2.series[1].data = seriesData;
        this.echarts2.setOption(this.option2);
      } else this.echarts2.clear();
    },