Is it too troublesome to turn pages manually when you encounter a form? I'll teach you to write a script that shows all the data on one page

The confusion of Internet users

People who read this article , It must be all Internet users . You must have met 「 form 」.

When we read the tables , There may be this confusion ：

• The form does not support keyword search
• The table does not support sorting by a column
• Each page of the form can only show 10 Data , Need to keep turning pages , To see all the content

What shall I do? ？

If only one page of the table could show all the data ！

In this case ：

• Keyword search can be done through the browser 「 Search for 」 Function realization （Ctrl+F or Command+F）.
• Sorting can be realized by referring to my next article （ Coming soon ）.
• There is no need to turn pages manually .

Next , Let me HullQin To provide you with a solution , Let the table show all the data on one page ！

Solution

Take nuggets for example

We found that , This is called list_by_user Of API, Is the back-end paging API.

We just need to iterate through the request , You can get all the data in the form , Then let the front end be displayed at one time ～

Here you are 2 Two problems need to be solved ：

1. I'm going to cycle through the interface by page , So as to obtain all the data of the table .
2. I want to make the front-end Nuggets code request when , Only request 1 Time , Get all the data . In this way, it can be displayed at one time .

Solve the 1 A question ： Get all the data

Let's open the browser's developer tools , open Network（ The Internet ） panel , Found this called list_by_user Of API, The required data of the table is returned .

We need to modify it page_no Parameters , Then iterate over it many times , Always request this interface , Until the last page .

Chrome The most convenient thing is , Can directly Copy as fetch, After clicking , You can copy the request fetch edition , do 「 Replay attack 」 It's too convenient ,Chrome The intimate function of is really too painful ！

Of course, the above 「 Replay attack 」 Use quotation marks , It's not really a replay attack , We just did one more query , It does not change the data state of the back end .

below , Change it fetch function , We need to save its results .

This API The return result of is ：

Our ultimate goal is , hold data All the data in are integrated into the same array .

const result = [];
const res = await fetch('... What you copied ');
const data = await res.json();
result.push(...data.data);
 Copy code 

Next , We add... To the above logic for Loop to achieve paging access ：

const result = [];
//  Don't put too much pressure on Nuggets , We define a sleep function ,1 Just ask once per second 
const sleep = async () => new Promise(resolve => setTimeout(resolve, 1000));
for (let i = 1; i <= 2; i++) { //  Note that you need to i The maximum value of is changed to , See how many times you need to download all the data .
  const res = await fetch("https://api.juejin.cn/content_api/v1/article/list_by_user? Change it to your parameter ！", {
    "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(); //  Don't put too much pressure on Nuggets , We 1 Just ask once per second 
}
 Copy code 

Now? ,result That's all the data in our table ！