李恒道 发表于 2022-5-10 23:44:02

[脚本实战篇]分析网络请求

之前知道我们点击章节会远程加载一下内容
所以这节课目的主要是分析一下网络请求封装出一个函数
抓包可以知道调用了一个getRess
![图片.png](data/attachment/forum/202205/10/223507l0kttvjtavid9lrj.png)
提交参数也非常简单
是一个章节id
![图片.png](data/attachment/forum/202205/10/223535e8rj8gwlr0wz4u22.png)
那么我们的目标很简单了
就是将之前得到的数组全部转化为章节id
并实现请求,拿到相应数据
我们再查看一下返回数据
![图片.png](data/attachment/forum/202205/10/223654l3uhioneosin3k4r.png)
可以看到就是简单的章节内数据
那我们开始写吧
先从dom中读取到章节数据
这里看到有两种元素,li的是主章节的,a是子章节的
![图片.png](data/attachment/forum/202205/10/223800c9df8ndldfmmfd8r.png)
我们先看主章节,在data-id属性上
![图片.png](data/attachment/forum/202205/10/223928ggn801ogjczg18c0.png)
而子章节的却在data-secid上
![图片.png](data/attachment/forum/202205/10/223954gghwhwwqb4xy64b1.png)
那么我们可以直接写一个暴力判断
通过读data-id属性,如果读不到直接写一个data-secid属性
因为我们是遍历数组,所以可以直接写一个map属性,然后根据其返回值进行赋值
```javascript
ChapterList= ChapterList.map((item)=>item.getAttribute("data-id")??item.getAttribute("data-secid"))
```
可以直接由dom数组转化成id的数组集合
![图片.png](data/attachment/forum/202205/10/233602u0cmw6w52bw8kw6r.png)
然后我们封装GM_Xhr制作一个简单的promise的post封装
```javascript
function GetRessList(id){
    return new Promise((resolve,reject)=>{

      GM_xmlhttpRequest({
            url:"https://service.icourses.cn/hep-company//sword/company/getRess",
            method :"POST",
            data:"sectionId="+id,
            headers: {
                "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
            },
            onload:function(xhr){
                try {
                  resolve(JSON.parse(xhr.responseText).model.listRes)
                }
                catch(err) {
                  resolve([])
                }
            }
      });
    })
}
```
这里用了promise封装,然后直接json解析找到listRes,如果中间出现任何错误则返回一个空数组
![图片.png](data/attachment/forum/202205/10/234322fb9jiziw1whdggz6.png)
然后简单测试一下
![图片.png](data/attachment/forum/202205/10/234339cvcg9d5evy0q04kv.png)
可以发现拿到了数组~
那么这节课我们就搞定了
下节课我们开始尝试操控网页的数据来实现自动刷课!
页: [1]
查看完整版本: [脚本实战篇]分析网络请求