循环调用接口

async asyncFn() {
      this.loadingText = `正在查询：1/${this.liveArr.length}`;
      for (var i = 0; i < this.liveArr.length; i++) {
        try {
          this.loadingText = `正在查询：${i + 1}/${this.liveArr.length}`;
          await this.getVideoList(this.liveArr[i].value,i);
        } catch (e) {
          this.videoChnList.push([]);
          this.loadingText = `正在查询：${i + 1}/${this.liveArr.length}`;
        }
      }
      this.loading = false;
      this.$refs.videoChn.getVideoChnList(this.videoChnList, this.carNo);
      this.videoChnList = [];
    },

后台的异步接口，需要返回一个primise对象

getVideoList(cameraId,i) {
      let promise = new Promise((resolve, reject) => {
        let videoParam = {};
        videoParam.startTime = `${this.dateVal} 00:00:00`;
        videoParam.endTime = `${this.dateVal} 23:59:59`;
        videoParam.cameraId = cameraId;
        videoParam.imei = this.imei;
        getVideoList(videoParam)
          .then((res) => {
            if (res.data.code === 0) {
              let startTime = null;
              let endTime = null;
              const data = res.data.data;
              data.forEach((item, index) => {
                startTime = item.start.substr(11);
                endTime = item.end.substr(11);
                let arrTime = [
                  this.switchTime(startTime),
                  this.switchTime(endTime),
                ];
                this.channels[i].push(arrTime);
                this.$set(item, 'chn', cameraId);
              });
              this.videoChnList.push(data);
              // this.loadingText = `正在查询：${cameraId + 1}/7`
              resolve('成功了');
            } else {
              reject('出错了');
            }
          })
          .catch((e) => {
            reject('出错了');
          });
      });
      return promise;
    },

最终效果描述
当用户点击查询时，掉第一次接口，页面显示加载特效，第一次接口有返回后（无论后台接口是否返回成功）调第二次。。。。。。依次类推，当调完7次后，加载特效消失
ps:注意这里的for循环不要用foreach或者map，要不然会失效