Vue 实现数据的批量加载

之前在写vue的项目，因为使用的websocket获取设备数据，后台一次性返回的数据量太大并且获取到数据后需要获取其详细数据需要调用接口获取（相当于获取详情），一次性获取数据过多会导致页面卡死，所以最后使用了批量加载数据，在此记录下....

我们将websocket接收到的所有数据赋值给deviceList,然后将该数据分为多个批次，然后分批请求（这边我是按照每10条数据为一组，分批请求的）

data() {
  deviceList:[],
  cardDeviceList:[]
},
methods:{
     splitData (list) {
      var res = []
      for (var i = 0, len = list.length; i < len; i += 10) {
        res.push(list.slice(i, i + 10))
      }
      return res
    },
    getList () {
      // 接收到的数据
      this.deviceList = [
        {
          id: 1,
          name: '测试机'
        },
        {
          id: 2,
          name: '测试机1'
        },
        {
          id: 3,
          name: '测试机2'
        },
        {
          id: 4,
          name: '测试机3'
        },......
      ]
      const data = this.splitData(deviceList)
      this.getIustatusList(this.cardDeviceList, 0, data)
    },
    getIustatusList (cardDeviceList, num, data) {
      // cardDeviceList是我这边接收到的设备列表与获取到的数据进行匹配赋值的
      let requestList = []
      data[num].forEach(el => {
        requestList.push(你这边请求的接口)
      })
      Promise.all(requestList).then(res => {
        num++
        if (num < data.length) {
          this.getIustatusList(cardDeviceList, num, data)
        }
      })
    },
  
}