前言

上次我们使用js脚本定位页面标签，获取数据并统计结果，为了处理页面展示数据不全的问题，做了几个点击动作，修改了列表的行间距，后来发现数据量再多一些还是会出现问题。

思路

因为受页面加载等因素限制，获取数据比较复杂，那么开始考虑使用接口请求的方式获取数据，因为接口获取数据全面，而且不用考虑页面加载环境和标签元素定位。

我们准备使用fetch()开发送请求，fetch是一个JavaScript接口，用于访问和操作HTTP协议的部分，例如请求和响应。它还提供了一个全局的fetch()方法，用于异步地从网络上获取资源。

查找列表数据接口

打开devtools -> network，分析查找到列表数据的接口

复制请求为fetch请求格式

选中请求右键copy -> copy as fetch，复制的代码如下：

fetch("url:xxxxx", {
  "headers": {
    "accept": "application/json, application/xml, text/play, text/html, */*",
    "x-sourced-by": "ajax"
  },
  "referrer": "https://www.italent.cn/",
  "referrerPolicy": "strict-origin-when-cross-origin",
  "body": "{}",
  "method": "POST",
  "mode": "cors",
  "credentials": "include"
});

分析接口，实现数据请求

分析接口请求参数，提取一些自定义入参，例如用户id，查询时间等等，然后修改content.js 代码：

var data = null;
// 格式化日期
function formatDate(date) {
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();
  return year + "/" + (month < 10 ? "0" + month : month) + "/" + (day < 10 ? "0" + day : day);
}
// 从页面中获取用户信息
var str = document.getElementsByTagName('script')[0].text;
var str1 = str.substring(str.indexOf('userId":') + 8);
var userId = str1.substring(0,str1.indexOf(','));
var str2 = str.substring(str.indexOf('userName":"') + 11);
var userName = str2.substring(0,str2.indexOf('",'));
// 获取本月第一天和最后一天日期
var date = new Date();
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
var dateStr = formatDate(firstDay) + "-" + formatDate(lastDay);
var bodyStr = "{}";

var promise = fetch("https://xxx", {
  "headers": {
	"accept": "application/json, application/xml, text/play, text/html, */*"
  },
  "referrer": "https://www.italent.cn/",
  "referrerPolicy": "strict-origin-when-cross-origin",
  "body": bodyStr,
  "method": "POST",
  "mode": "cors",
  "credentials": "include"
}).then((res)=>{
	return res.text()
  })
  .then((res)=>{
	data = JSON.parse(res);
  });
var total = 0;
var totalAbsenceDuration = 0;
setTimeout(function(){
	var list = data.biz_data;
		
		for (let i = 1; i < list.length; i++) {
				var absenceDuration = Number(list[i].AbsenceDuration.value);
				totalAbsenceDuration = totalAbsenceDuration + absenceDuration;
				var title = list[i].SwipingCardDate.text;
				var start = '--';
				if(typeof(list[i].ActualForFirstCard) != "undefined"){
						start = list[i].ActualForFirstCard.value;
				}
				var end = '--';
				if(typeof(list[i].ActualForLastCard) != "undefined"){
						end = list[i].ActualForLastCard.value;
				}
				console.log(title + ' ' + start + ' ' + end);
				if('--' === start || '--' === end){
						console.log('加班时长：0');
						continue;
				}
				if(list[i].DateType.value === '1'){
						start = start.slice(0, 11) + '18:30:00'
				}
				var cost = (new Date(end).getTime() / 1000 - new Date(start).getTime() / 1000) / 60;
				if(cost < 30){
						cost = 0;
				}
				console.log('加班时长：' + cost);
				total = total + cost;
		}
		console.log('加班总时长：' + total);
		var study = 1800 - total;
		alert('加班总时长：' + total);
}, 1000);

这边fetch请求放到一个定时器中，延迟1000ms后执行，是因为获取当前用户信息也需要一点时间，避免还未获取到用户信息就发送请求了。

展示效果：

总结

使用接口请求数据适用于大部分场景，而且返回的数据完整，数据格式简单方便解析，但是对于一些数据加密的接口处理起来就比较复杂，可以根据实际情况选择合适的方法。除了fetch还可以使用xhr发送请求，方式大同小异，下次有机会再说。

THE END