这是废话....
【写的可能不专业,但是我会加油的,ヾ(◍°∇°◍)ノ゙ 】
与后台的交互用的是axios,从来也没有考虑过缓存的事情,这次后台提出了一个需求,get请求的请求头加上If-Modified-Since,然后就去查文档(原谅小白没经验)。发现在ajax中有一个ifModified属性为true的时候可以实现。而axios里并没有相对应的属性支持(orz也可能是我没找到)
了解ifModified
ifModified (Boolean) : (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
由ifModified的定义可知,当ifModified设为true时,请求头会加上If-Modified-Since, If-Modified-Since是标准的http请求头标签,在发送http请求时,把浏览器端缓存页面的最后修改时间一起发到服务器去,服务器会把这个时间与服务器上实际文件的最后修改时间进行比较。
如果时间一致,那么返回http状态码304(不返回文件内容)
如果时间不一致,就返回http状态码200和新的文件内容,客户端接到之后,会丢弃旧文件,把新文件缓存起来,并显示到浏览器中。
实现
function getAjax(url, sendData, state = true) {
return new Promise((resolve, reject) => {
$.ajax({
url: url,
data: sendData,
type: 'get',
dataType: 'json',
cache: !state, //是否使用浏览器的缓存数据
ifModified: state,//是否向服务器询问数据更新情况
success(data, des, status) {
if (status.status === 200) {
if (data.code === 200) {
return resolve(data.data);
} else {
return reject({code: data.code, message: data.message});
}
}
if (status.status === 304) {
getAjax(url, sendData, false)
.then(data => {
resolve(data);
})
.catch(data => {
reject(data);
});
}
}, error() {
return reject({code: 503, message: '数据无法加载,请刷新重试!'});
}
});
});
}
解析
getAjax中传入3个参数,url接口地址,sendData 传输的数据,state状态值【代表ifModified的状态】;
首先向后台询问数据是否更新,ifModified的状态为true,不使用浏览器的缓存数据,cache设false
当http状态码返回200时,说明数据更新了,直接使用服务器传输过来的新数据;
当http状态码返回304时,说明数据没有发生改变,服务器不返回新数据,则向浏览器缓存请求数据,此时cache设true,ifModified的状态为false,不需要询问服务器数据是否更新。