解决vue项目在ie浏览器缓存问题。


ie浏览器一直是程序员的噩梦。项目在谷歌浏览器上完美运行。在ie浏览器上,缓存问题真心恶心。后台查看了资料说在接口上加上时间戳或随机数就行了。要是这样干,工作量真心大啊。后来我对我们公司大神封装的axios进行修改。

修改前POST请求:

export const postRequest = (url, params, method) => {
    // debugger
    //base = getCookie("server_context_gi");
    // alert(`${base}${url}`);
    if(method == "form") {
        return axios({
            method: 'post',
            url: `${base}${url}`,
            data: params,
            transformRequest: [function(data) {
                let ret = ''
                for(let it in data) {
                    if((typeof data[it]) === 'object') {
                        data[it] = JSON.stringify(data[it])
                    }
                    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                }
                return ret
            }],
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        });
    } else if(method == "json") {
        return axios({
            method: 'post',
            url: `${base}${url}`,
            data: params,
            headers: {
                'Content-Type': 'application/json;charset=UTF-8'
            }
        });
    }
}

修改后:

export const postRequest = (url, params, method) => {
    //base = getCookie("server_context_gi");
    // alert(`${base}${url}`);
    if(method == "form") {
        return axios({
            method: 'post',
            url: `${base}${url}`,
            data: params,
            transformRequest: [function(data) {
                let ret = ''
                for(let it in data) {
                    if((typeof data[it]) === 'object') {
                        data[it] = JSON.stringify(data[it])
                    }
                    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                }
                ret = ret + 'n=' + encodeURIComponent(Math.random())
                return ret
            }],
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        });
    } else if(method == "json") {
        if(params){
            if(typeof(params)=='string'){
                let p1 = JSON.parse(params);
                p1['n'] = encodeURIComponent(Math.random());
                params=JSON.stringify(p1);
            }else{
                params['n'] = encodeURIComponent(Math.random());
            }
        }
        return axios({
            method: 'post',
            url: `${base}${url}`,
            data: params,
            headers: {
                'Content-Type': 'application/json;charset=UTF-8'
            }
        });
    }
}

修改前get请求:

export const getRequest = (url) => {
    //base = getCookie("server_context_gi");
    // alert(`${base}${url}`);
    return axios({
        method: 'get',
        url: `${base}${url}`
    });
}

export const searchRequest = (url, params) => {
    //    base = getCookie("server_context_gi");
    let ret = '';
    for(let it in params) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(params[it]) + '&'
    }
    return axios({
        method: 'get',
        url: `${base}${url}` + "?" + ret
    });
}

修改后:

export const getRequest = (url) => {
    //base = getCookie("server_context_gi");
    // alert(`${base}${url}`);
    if(url.indexOf("?") != -1){
        url = url + "&n="+encodeURIComponent(Math.random())
    }else{
        url = url + "?n="+encodeURIComponent(Math.random())
    }
    return axios({
        method: 'get',
        url: `${base}${url}`
    });
}

export const searchRequest = (url, params) => {
    //    base = getCookie("server_context_gi");
    let ret = '';
    for(let it in params) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(params[it]) + '&'
    }
    ret = ret + "n=" + encodeURIComponent(Math.random())
    return axios({
        method: 'get',
        url: `${base}${url}` + "?" + ret
    });
}

这样就解决了ie缓存问题,这样修改的关键点是只要修改封装的axios即可,其他的不用修改。