我是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次，就取得所有的数据。这样能够一次性展现。
解决第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 噢～我有空了会分享做游戏的相干技术。