共计 1360 个字符,预计需要花费 4 分钟才能阅读完成。
互联网用户的困惑
看到这篇文章的人,想必都是互联网用户吧。你们肯定遇到过「表格」。
咱们在浏览表格时,可能有这种困惑:
表格不反对关键词搜寻
表格不反对依照某列排序
表格每页只能展现 10 条数据,须要一直翻页,能力看完所有内容
怎么办呢?
如果表格一页能展现所有数据就好了!
这样的话:
关键词搜寻能够通过浏览器的「搜寻」性能实现(Ctrl+ F 或 Command+F)。
排序能够参照我下一篇文章实现(敬请期待)。
不再须要手动翻页了。
接下来,让我 HullQin 来给你提供一种解决办法,让表格能一页展现所有数据!
解决方案
咱们只有遍历申请它,就能够拿到表格所有的数据,之后让前端一次性展现进去就能够了~
这里有 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 就是咱们表格中的所有数据了!