使用Ajax调用获取大数据超20k时出现net::ERR_CONNECTION_REST错误求助

看起来你遇到的这个net::ERR_CONNECTION_RESET错误，主要是因为一次性请求的数据量太大，触发了浏览器或者服务器的请求/响应大小限制，再加上你用了同步请求（async: false），这种模式下浏览器会一直阻塞等待响应，大数据量场景下很容易出现连接中断的情况。下面给你几个可行的解决办法：

• 优先改用异步请求
  同步请求会卡死浏览器主线程，而且大数据量下超时风险极高，直接把async: false改成async: true，然后用回调或者Promise来处理返回的数据：

  $.ajax({
    type: "POST",
    url: serviceUrl,
    async: true, // 切换为异步
    data: JSON.stringify(Data),
    contentType: "application/json",
    dataType: "json",
    success: function(fullData) {
      // 在这里处理拿到的大量数据
    },
    error: function(xhr, status, err) {
      console.error("请求出错：", err);
    }
  });
  

• 分页加载数据（最推荐）
  一次性拉取2万+条数据本身就不是最优方案，不仅容易触发大小限制，前端渲染和处理这么多数据也会很卡顿。建议和后端配合，做分页接口，前端分批次请求：
  比如每次请求1000条，直到拿完所有数据：

  let currentPage = 1;
  const pageSize = 1000;
  let allData = [];
  
  function fetchNextPage() {
    $.ajax({
      type: "POST",
      url: serviceUrl,
      // 把分页参数传给后端
      data: JSON.stringify({...Data, page: currentPage, pageSize: pageSize}),
      contentType: "application/json",
      dataType: "json",
      success: function(res) {
        allData = allData.concat(res.dataList);
        // 如果当前页返回了满额数据，说明还有下一页
        if (res.dataList.length === pageSize) {
          currentPage++;
          fetchNextPage();
        } else {
          // 所有数据都获取完成了，开始处理
          console.log("全部数据：", allData);
        }
      }
    });
  }
  
  // 启动分页请求
  fetchNextPage();
  

• 调整服务器端的请求/响应大小限制
  如果你必须一次性获取数据，那得检查后端的配置，调大允许的请求体和响应体大小：

  • 比如ASP.NET项目，要修改web.config里的maxRequestLength和maxAllowedContentLength参数
  • Node.js+Express的话，调整body-parser的limit（比如app.use(bodyParser.json({ limit: '50mb' }))）
  • 其他后端框架也有类似的配置项，根据你的技术栈去调整

• 开启响应压缩
  让后端开启Gzip压缩，能大幅减小响应的体积，既可以避免大小限制，还能提升传输速度。Nginx、IIS、Apache这些主流服务器都能轻松开启Gzip压缩，配置起来也不复杂。

内容的提问来源于stack exchange，提问作者sai v