时间戳

首页 > 解决方案 > 如何在没有延迟的情况下一次调用客户端获取 10,000 条数据？

reactjs - 如何在没有延迟的情况下一次调用客户端获取 10,000 条数据？

问题描述

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

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

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

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

我想在客户端发出 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);

标签： reactjstypescriptexpressknex.jsmobx

解决方案

就像其他答案所说的那样，您可能希望为您的表格使用虚拟化来获得无延迟滚动 UX。

但这并不能解决巨大的 GET 请求的问题，在这里您可以使用分页，例如询问服务器只发送前 500 个项目，并且在用户将表格滚动到这 500 个项目的底部之后，您可以向服务器询问下一个 500 个项目和很快。

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

推荐阅读