遇到表格，手动翻页太麻烦？我教你写脚本，一页展示所有数据

互联网用户的困惑

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

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

表格不支持关键词搜索
表格不支持按照某列排序
表格每页只能展示10条数据，需要不断翻页，才能看完所有内容

怎么办呢？

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

这样的话：

关键词搜索可以通过浏览器的「搜索」功能实现（Ctrl+F或Command+F）。
排序可以参照我下一篇文章实现（敬请期待）。
不再需要手动翻页了。

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

解决方案

以掘金为例子

我们发现，这个叫做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秒请求一次就好
}
复制代码