后端一下给十万条数据前端怎么处理

当后端返回的数据量较大时，如果不经过处理直接展示，页面会有长时间的白屏，虽然可以通过添加Loading来改善用户体验，但是我们还是要尽可能的缩短白屏时间。

本次记录一下处理过程

后端返回十万条数据

// 1、引入express
const  express = require('express')
// 2、创建app对象(项目对象)
const app = express()
//解决跨域
const cors = require('cors');
app.use(cors()); 

// 3、处理请求
app.get('/',(req,res)=>{
    let data = []
    //模拟十万条数据
    for(let i = 0; i < 100000; i++){
        data.push({id: i})
    }
    //前端我会通过fetch请求数据，这里记得转换为JSON格式的数据
  res.end(JSON.stringify(data))
})
// 4、监听是否有请求
app.listen(3001,()=>{
  console.log(`监听3001端口，服务启动！`);
})

前端处理十万条数据

这里只是进行了简单的数据展示，并没有夹杂业务逻辑

<script setup>
import { reactive } from "@vue/runtime-core";

const bigData = reactive({ data: [] })
const getData = () => {
  fetch('http://localhost:3001/').then(
    res => {
      return res.json()
    }
  ).then(
    res => {
      console.log(res);
      // 不分组
      bigData.data = [...res]
      // 分组
      // const datas = group(res)
      // for (let i = 0; i < datas.length; i++) {
      //   setTimeout(() => {
      //     bigData.data = [...bigData.data, ...datas[i]]
      //   }, 10);
      // }
    }
  ).catch(err => {
    console.log(err);
  })
}
// 将请求的数据按照每组一万条数据进行分组
const group = (data) => {
  var result = [];
  var groupItem;
  for (var i = 0; i < data.length; i++) {
    if (i % 10000 == 0) {
      groupItem != null && result.push(groupItem);
      groupItem = [];
    }
    groupItem.push(data[i]);
  }
  result.push(groupItem);
  return result;
}

</script>
<template>
  <div class="container" @click="getData">getData</div>
  <ul>
    <li v-for="item in bigData.data" :key="item.id">{{ item.id }}</li>
  </ul>
</template>

<style lang="scss" scoped>
</style>