需求陈述

由于API是特定单位/特定类别/特定教学方式的数据，故汇总数据需要循环请求不同单位/不同类别/不同教学方式。

技术要点

1.axios并发请求
2.JS for循环
3.Vue数组中出现 ob :Observer无法取值问题的解决方法
4.将数据转化为数组
5.一次请求所有数据后，再分页

1.axios并发请求

关键点1：myDLTMultiData()方法来循环请求 SearchData()。
关键点2：axios.all([Array_A])中的Array_A是请求的列表。

    //Array_A来保存【请求的队列】
    SearchData(myDate_start,myDate_end,myuserId,trainingMethodId,pageNum,skillcode){
      axios({
          timeout:3000,
          method:"post",
          url:"https://dltapi.wis***.com/dlt/org/trainingrecord/search",
          data:{
            startDate: myDate_start ||'2012-01-01',
            endDate: myDate_end ||'2050-06-01',
            trainingMethodId: trainingMethodId || 1,
            currentPage: pageNum || 1,
            userId:myuserId,
            // courseCode: "K01002003CM",
            // courseName:'EC/batch/try run流程（课程）',
            orgSkillCode:skillcode || "SPK011",
            pageSize: 1000000,
          },
          headers:{
            'Content-Type': 'application/json',
            'Authorization': sessionStorage.getItem('UserPermission'),
          },
        }).then(
          (response) => {
            // console.log('response',response)
            //拼数组
            for (let j = 0; j < response.data.trainingRecords.length; j++) {
              this.DLT_data.push(response.data.trainingRecords[j])
            }
            // return response.data.trainingRecords
          }
        ).catch(
          function (err) {
              // 请求失败处理
              console.log('请求失败！',err)
              // alert('请求失败！',err)
          })
    },

    myDLTMultiData(myDate_start,myDate_end,myuserId){
      this.DLT_data = []
      let Array_A = []
      let skillcodeRange = ["SPK001","SPK002","SPK003","SPK004","SPK005","SPK006","SPK007","SPK008","SPK009","SPK010",
      "SPK011","SPK012","SPK013","SPK014","SPK015","SPK016","SPK017","SPK018","SPK019","SPK020","SPK021","SPK022",
      "SPK024","SPK025","SPK026","SPK027","SPK028","SPK029","SPK030","SPK031","SPK032","SPK033","SPK034",
      "SPK035","SPK036","SPK037","SPK038","SPK039","SPK040","SPK04","SPK042","SPK043"]
      // let skillcodeRange = ["SPK036","SPK037","SPK038","SPK039","SPK040","SPK041","SPK042","SPK043"]

      
      //循环
      for (let s = 0; s < skillcodeRange.length; s++) {
        for (let m = 1; m < 3; m++) {
          // 页码需从1开始,100000笔，搜索一次就好
          for (let i = 1; i < 2; i++) {
              Array_A.push(this.SearchData(myDate_start,myDate_end,myuserId,m,i,skillcodeRange[s]))
            }
          }
      }

      setTimeout((Array_A)=>{
            axios.all([
              Array_A
          ]).then((response)=>{

              //Vue数组中出现__ob__:Observer无法取值问题的解决方法，把值转为DLT_data_all
              this.DLT_data_all = JSON.parse(JSON.stringify(this.DLT_data))
              // console.log('DLT_data',JSON.parse(JSON.stringify(this.DLT_data)))
              console.log('DLT_data_all',this.DLT_data_all)

          }).catch(e=>{ // 失败的时候则返回最先被reject失败状态的值
              console.log("error",e)
          })

        },3000)

    },

2.JS for循环

将请求循环push到Array_A

      //循环
      for (let s = 0; s < skillcodeRange.length; s++) {
        for (let m = 1; m < 3; m++) {
          // 页码需从1开始,100000笔，搜索一次就好
          for (let i = 1; i < 2; i++) {
              Array_A.push(this.SearchData(myDate_start,myDate_end,myuserId,m,i,skillcodeRange[s]))
            }
          }
      }

3.Vue数组中出现 ob :Observer无法取值问题的解决方法

https://blog.csdn.net/wanshuai12138/article/details/124809122
setTimeout()方法去除Observer

vue 怎么拿到{ ob: Observer}里面的值？https://blog.csdn.net/weixin_49522520/article/details/125522547

      setTimeout((Array_A)=>{
            axios.all([
              Array_A
          ]).then((response)=>{
              //Vue数组中出现__ob__:Observer无法取值问题的解决方法，把值转为DLT_data_all
              this.DLT_data_all = JSON.parse(JSON.stringify(this.DLT_data))
          }).catch(e=>{ // 失败的时候则返回最先被reject失败状态的值
              console.log("error",e)
          })
        },3000)

4.将数据转化为数组

将每次并发请求的数据重组为数组，保存在DLT_data里面。

//拼数组
for (let j = 0; j < response.data.trainingRecords.length; j++) {
     this.DLT_data.push(response.data.trainingRecords[j])
}

5.一次请求所有数据后，再分页

DLT_data_all来保存所有数据，pageNum来做切片。

  computed: {
    DLT_data_filter(){
      //return this.DLT_data_all.slice(0,10)
      if(this.pageNum==1){
        return this.DLT_data_all.slice(0,10)
      }
      else{
        return this.DLT_data_all.slice((this.pageNum-1)*10,this.pageNum*10)
      }
    }
  },

  methods: {
    handlenextClickDLT(val) {
      //把回调参数val给pageNum
      console.log("当前页码：", val);
      this.pageNum = val
    },
   }