最开始我选择的是触发事件,在事件内再调用调取接口数据的事件同时让显示的属性变成true

 这样是可以完成需求,但是当数据过多时会出现小bug,就是有些数据还没调取处理完成页面就显示   了,让部分所需的数据不能直接显示

因此后来我选择了this.axios.all()方法,这个可以一次性调用括号内的所有方法数据

首先,你依旧要有个触发事件去调用你要使用this.axios.all()方法的事件

其次,你也依旧要有事件去获取你所需接口的数据(有几个接口写几个)

最后,你在要调用所有获取借口数据方法的事件中处理你的数据(还要特别注意,你想要在处理完数据后执行的东西要放在then里面)详细看下面代码解说

//按钮或则其他 你要先触发的事件

  viewMoreData() {
    this.getAllData()
    },

//你要获取的接口数据的方法

   getTargetData() {
      return axios.request({
        url: `/你的接口s/${你要传的参数}`,
        method: '传参方式'
      })
    }
    ....

//你要处理所有接口数据的事件

 getAllData() {
      this.axios.all([this.getTargetData(),
        this.getCaloricityData(),
        this.getPIONAData(),
        this.getBoilingRangeData(),
        this.getComponentUsageData(),])
        .then(([res1, res2,res3,res4,res5]) => {
          //res1
          if (res1.data.check) {
            this.targetData = JSON.parse(JSON.stringify(res1.data.data))
            console.log(1, this.targetData);
          } 
          //res2
          if (res2.data.check) {
            this.caloricityData = JSON.parse(JSON.stringify(res2.data.data))
          }
          //res3
          if (res3.data.check) {
            this.pionaData = JSON.parse(JSON.stringify(res3.data.data)) 
          } 
          //res4
          if (res4.data.check) {
            this.boilingRangeData = JSON.parse(JSON.stringify(res4.data.data))
          }
          //res5
          if (res5.data.check) {
            this.componentUsageData = JSON.parse(JSON.stringify(res5.data.data))
          }
              this.viewMore = true
        })
    },