我是 HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者 HullQin 授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加 Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。

互联网用户的困惑

看到这篇文章的人，想必都是互联网用户吧。你们一定遇到过「表格」。

我们在阅读表格时，可能有这种困惑：

• 表格不支持关键词搜索

• 表格不支持按照某列排序

• 表格每页只能展示 10 条数据，需要不断翻页，才能看完所有内容

怎么办呢？

如果表格一页能展示所有数据就好了！

这样的话：

• 关键词搜索可以通过浏览器的「搜索」功能实现（Ctrl+F或Command+F）。

• 排序可以参照我下一篇文章实现（敬请期待）。

• 不再需要手动翻页了。

接下来，让我 HullQin 来给你提供一种解决办法，让表格能一页展示所有数据！

解决方案

以掘金为例子

进入「创作者中心」-「内容数据」-「数据趋势」-「单篇分析」https://juejin.cn/creator/data/content/article/single 后，刚好有个表格，我们拿来练练手。

我们发现，这个叫做list_by_user的 API，是后端的分页 API。

我们只要遍历请求它，就可以拿到表格所有的数据，之后让前端一次性展示出来就可以了～

这里有 2 个问题需要解决：

1. 我要按页循环请求接口，从而获取表格所有的数据。

2. 我要让前端的掘金代码请求时，只请求 1 次，就获得所有的数据。这样可以一次性展示。

解决第 1 个问题：获取所有数据

我们打开浏览器的开发者工具，打开 Network（网络）面板，发现了这个叫做list_by_user的 API，返回了表格的所需数据。

我们需要修改它的page_no参数，然后遍历多次，一直请求这个接口，直至最后一页。

Chrome 最方便的一点是，可以直接Copy as fetch，点击后，就可以复制这个请求的 fetch 版本，做「重放攻击」也太方便啦，Chrome 的贴心功能真是太刑啦！

当然以上的「重放攻击」都要打引号，其实不算重放攻击，只是我们多做了一次查询，它并没有改变后端的数据状态。

下面，改一下 fetch 函数，我们需要保存它的结果。

这个 API 的返回结果是这样的：

我们最终目的是，把 data 里的数据都整合进同一个数组中。

const result = [];const res = await fetch('...你复制的内容');const data = await res.json();result.push(...data.data);

接下来，我们给上面的逻辑加上 for 循环实现分页获取：

const result = [];// 不能给掘金太大压力，我们定义个sleep函数，1秒请求一次就好const sleep = async () => new Promise(resolve => setTimeout(resolve, 1000));for (let i = 1; i <= 2; i++) { // 注意这里需要把i的最大值改下，看看你需要几次才能下载完所有数据。  const res = await fetch("https://api.juejin.cn/content_api/v1/article/list_by_user?修改成你的参数！", {    "headers": { "content-type": "application/json" },    "body": "{\"page_size\":10,\"page_no\":" + i + ",\"audit_status\":null}",    "method": "POST",    "mode": "cors",    "credentials": "include",  });  const data = await res.json();  result.push(...data.data);  await sleep(); // 不能给掘金太大压力，我们1秒请求一次就好}

现在，result 就是我们表格中的所有数据了！

解决第 2 个问题：一次性渲染到前端页面

方法比较多，这里我们用个简单的方法，参考上篇文章《嘘！我改了掘金源代码！1 行代码，让表格支持 page_size 切换，从每页 10 条变为 20 条！》的原理。

针对list_by_user这个 API，我们返回一个特殊的对象，包含json方法，因为掘金的 JS 会在调用fetch后调用json，从而把 response body 中的字符串转为 json。我们只要在 json 方法中，返回预期的数据，那么掘金的 JS 就会帮助我们渲染这些数据啦！

_f = fetch;fetch = (u, i) => u.includes('list_by_user') ? {  json: async () => ({    count: result.length,    data: result,    err_msg: "success",    err_no: 0,  }),} : _f(u, i);

使用方法，跟上篇文章一样，先点开「整体分析」，再点开「单篇分析」，就可以看到，一页加载了所有文章数据啦！

适用范围

前后端分离的架构，后端提供了分页 API，前端只负责展示 API 返回的数据。

本文只是拿掘金举了个例子，其他网站也是大同小异。希望你能举一反三，以后面对类似情况时，也不会束手无策。

温馨提示

毕竟我本人之前也是字节的前端开发，出于责任感，提示下大家：禁止发送恶意请求给掘金噢，禁止压测噢，禁止利用掘金漏洞干坏事噢，不然你的账号可能会被封禁。

写在最后

我是 HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者 HullQin 授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加 Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。