前题
最近想做个ONE的小程序,本来打算直接寻找现成的API接口,无奈网上的大部分都不符合自己需求。
于是在浏览官网的过程中,进行数据包拦截分析,最终分析出官方的API请求地址以及其他注意事项。
我这里抓取的是【图文】页面,其他页面自行尝试。
请求地址
抓取流量,发现有一个json api请求:
http://m.wufazhuce.com/one/ajaxlist/0?_token=ebcfe13848eaca8d74f86140066c0186f22cf249
它会返回如下数据:

然后再页面滚动,会自动加载下一页API数据,地址是这样的:
http://m.wufazhuce.com/one/ajaxlist/2088?_token=ebcfe13848eaca8d74f86140066c0186f22cf249
可能你已经看出来了,这个/ajaxlist/2088
后边的数字,是我们第一次/ajaxlist/0
请求得到的数据列表的最后一个数据id
所以我们通过这样,就能无限地加载下一页数据了。
token获取
当然,前边的请求地址中的_token
参数是必须的,也是随机的(每个浏览器中所生成的都不同)
那我们从哪获取呢?
在html源码里:

所以我们只能解析该html数据,得到我们需要的token了,js代码如下:
var token = data.split("One.token = '")[1].split("'")[0];
data为html文本数据
cookie获取
就这么结束了吗?
不是的!我们获取到了token,但是请求的时候,会直接返回错误的数据:

这是为什么呢?
经过多次尝试,发现了问题所在:
_token是和Cookie相关联的
所以,我们还得去获取到_token
对应的Cookie
,然后在请求的时候加上,就可以了。
代码实现
当然上述的_token
和Cookie
获取可以在一次请求中完成,因为第一次请求,会返回一个Set-Cookie
的header:

所以我们直接封装一个api.js
:
// 作者:https://nextstack.xyz
var TOKEN = '';
class API {
constructor () {
this.API = 'http://m.wufazhuce.com/one/ajaxlist/';
this.COOKIE = '';
}
/**
* 获取token
*/
getToken () {
return new Promise((RES, REJ) => {
if (TOKEN) return RES(TOKEN);
wx.request({
url: 'http://m.wufazhuce.com/one',
responseType: 'text',
success: ret => {
this.COOKIE = ret.header['Set-Cookie'];
var _token = ret.data.split("One.token = '")[1].split("'")[0];
if (_token && (_token.length === 40)) {
TOKEN = _token;
return RES(_token);
}
REJ()
},
fail: REJ
})
})
}
/**
* 获取数据
*/
getData (page = 0) {
return new Promise((RES, REJ) => {
this.getToken().then(token => {
var url = this.API + page + '?_token=' + token;
console.log('request->', url)
wx.request({
url,
header: {
'Cookie': this.COOKIE
},
success: data => {
console.log('data=', data);
RES(data);
},
fail: REJ
})
})
});
}
}
module.exports = new API();
调用方法:
var API = require('../utils/api.js');
API.getData().then(datas => {
//下一页
API.getData(data.data[data.data.length - 1].id).then(next_datas => {})
})
网友评论