如何在一次调用客户端时无延迟地获取 10,000 条数据？

如何解决如何在一次调用客户端时无延迟地获取 10,000 条数据？

当我在一个 Get 请求中从数据库中获取超过 1 万条原始数据时，响应需要很长时间才能到达客户端。

有没有办法将这些数据分成小块传送到客户端？

当向客户端发送大量数据时，客户端必须等待请求完成才能使用该数据。

这会导致客户端延迟。每次客户端重新加载页面时，都会发出一个请求，客户端将等待上千条数据到达客户端。

我想在客户端发出 GET 请求时将其作为小数据块发送，客户端在不断完成来自服务器端的请求的同时立即接收数据，

就像流式数据，有没有这样的东西可以实现上面的逻辑？

示例代码

/**
 * SERVER SIDE DASHBOARD ENDPOINT
 */
import { Request,Response } from 'express';

public dashboard = (req: Request,res: Response) => {
  // I get more than 10k of data that contains a lot of jsonb AKA Large data
  let data = await knex('dashboard').select();
  // Here I want to send data as chunks and translate it in client side
  res.status(200).json({ status: 'success',data });
};

/**
 * CLIENT SIDE
 * MOBX STORE HOOK
 */
import axios from 'axios';
import { makeAutoObservable,runInAction } from 'mobx';

// The rest of the class code is here
// I call this method in App.tsx

public getData = async () => {
  try {
    let response = await axios({
      url: 'http://localhost:3000/dashboard',method: 'GET',});

    runInAction(() => {
      if (response.status === 'success') {
        this.data = response.data;
      } else {
        console.error(response.msg);
      }
    });
  } catch (err) {
    console.error(err.message || err);
  }
};


/**
 * REACT DASHBOARD COMPONENT
 */
import { FC,useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { Table } from 'antd';

import { useStore } from 'hooks/context';

const CustomTable: FC = () => {
  const { store } = useStore();
  const { data } = store;

  useEffect(() => {

  },[data]);


  let columns: any = [
    {
      title: 'id',dataIndex: 'id',}
  ];

  return (
    <>
      <div className={`table-responsive`}>
        <Table
          rowKey="id"
          className={`home__table`}
          columns={columns}
          dataSource={data}
        />
      </div>
    </>
  );
};

export default observer(CustomTable);

解决方法

你必须使用一些像 react-virtualized 或 react-window 这样的包使用这些元素只会渲染它们在屏幕上可用

就像其他答案所说的，您可能希望为您的表格使用虚拟化以实现无延迟滚动用户体验。

但是它不会解决巨大的 GET 请求的问题，在这里你可以使用像 ask server 这样的分页只发送前 500 个项目，在用户将表格滚动到这 500 个项目的底部后，你再问服务器下一个500 项等等。

分页可能以不同的方式实现，例如使用“pages” - 当您询问 page=1&limit=500 或使用“ids”时 - 当您要求服务器发送您在客户端上已经拥有的最后一个项目之后的项目afterId=123&limit=500