ajax中304缓存处理

这是废话....

【写的可能不专业，但是我会加油的，ヾ(◍°∇°◍)ﾉﾞ】
与后台的交互用的是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，不需要询问服务器数据是否更新。

最后编辑于：2018.10.29 11:15:01