axios轮询请求阻塞封装加时间戳或者随机数

吱夏cz

于 2023-06-20 11:48:38 发布

阅读量622

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/mo911108/article/details/131303663

版权

文章介绍了由于Chrome浏览器的缓存机制导致的请求阻塞问题，以及如何使用axios通过在请求中添加时间戳或随机数作为参数来避免这个问题。同时，展示了如何设置请求头，包括添加Authorizationtoken和处理content-type，确保请求的正确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于Chrome锁定了缓存，并在再次请求相同的资源之前等待上一个请求的结果，所以请求被阻塞，

解决方案：axios封装在请求中添加了一个参数，值为时间戳或者随机数，使请求具有唯一性

// 创建请求拦截
request.interceptors.request.use(
  (config) => {
    
    var user = JSON.parse(window.sessionStorage.getItem("user"));
    if (user) {
      var token = user.token
        config.headers["Authorization"] = `Bearer ${token}`
    } 
   
    // 设置请求头
    if(!config.headers["content-type"]) { 
      // 如果没有设置请求头 
      if (config.responseType === 'blob') {
        config.headers["content-type"] = "application/octet-stream;charset=UTF-8";
      } else {
        config.headers["content-type"] = "application/json;charset=UTF-8"; // 默认类型
      }
         }
         if (config.method === 'post') {
          config.data = {
            ...config.data,
             //paramRandom: Math.random(), // 随机数
            _t: Date.parse(new Date()) / 1000 // 时间戳
          }
        } else if (config.method === 'get') {
          config.params = {
            paramRandom: Math.random(), // 随机数
            ...config.params
          }
        }
   return config;
  },
  (error) => {
    Promise.reject(error);
  }
);