axios 中的get 请求浏览器会产生缓存

浏览器对于 GET 请求会将请求结果缓存起来,而 POST 不会。
其中更具体的细节是:

  • Chrome 和 Firefox 会检测 GET 请求的如果是静态资源才会缓存,如果是数据则不会缓存。
  • IE 浏览器则会将 GET 请求全部缓存,不会检测请求的是什么。

这样的场景很多,例如我们添加或修改数据成功后,立马调用列表查询接口,因查询接口是get请求,产生了缓存,响应数据还是之前数据,并没有新增或修改后的数据,给人感觉像是添加或修改失败,这显然是不合理的,那么如何禁止缓存呢?

我们可以给每一次的get 请求添加一个唯一的参数,最好是当前的时间 或者是随机数 都可以,浏览器 就会以为 这是一次新的get 请求,然后就会重新发起请求。

axios get请求添加去缓存

let Inc = (new Date()).getTime();
//axios 请求拦截器
axios.interceptors.request.use((config) => {
    // get请求添加一个去缓存变量
    if (config.method === 'get') {
        Inc += 1;
        if (config.params) {
            config.params._ = Inc;
        } else {
            config.params = {
                _: Inc
            };
        }
    } 
    return config;
}, (error) => {
    return Promise.reject(error);
});
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐