vue axios不缓存get请求(防止返回304不更新数据)

最近做项目遇到一款浏览器，由于缓存了get请求，导致不管如何刷新，数据都不更新的问题。以下分享一下解决办法:
解决思路就是给每一条get请求增加一个timestamp的参数，value为时间戳
但是我们又不想每次请求都加上，所以希望全局配置。

解决方法在代码最下方：

const { data, status } = res if (data.code && data.code !== 200) { vueInstance.$Modal.error({ title: data.code, content: data.message || data.error || '系统出错' }) } return { data, status } }, error => { this.destroy(url) return Promise.reject(error) }) } request(options) { const instance = axios.create() if (!options['method']) { //没有method的请求为get，判断为get请求 if (!options['params']) { //如果这个请求本身不带参数 Object.assign(options, { //给options这个对象添加一个params的参数，属性为timestamp,值为时间戳 params: { timestamp: new Date().getTime() } }) } else { Object.assign(options.params, { //如果get请求本身带有参数，给options.params 再添加一个key值timestamp,值为时间戳 timestamp: new Date().getTime() }) } } options = Object.assign(this.getInsideConfig(), options) this.interceptors(instance, options.url) return instance(options) } } export default HttpRequest //返回HttpRequest对象 由于时间仓促，这段代码没有做太多优化，只给大家提供思路。 " title="" data-original-title="复制">

import axios from 'axios'
// import { Spin } from 'iview'
import {
  getToken
} from '@/libs/util'
import vue from 'vue'
const vueInstance = new Vue()

class HttpRequest {
  constructor(baseUrl = baseURL) {
    this.baseUrl = baseUrl
    this.queue = {
    }
  }
  getInsideConfig() {
    const config = {
      baseURL: this.baseUrl,
      timeout: 60000,
      headers: {
        Authorization: getToken() || '',
        post: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
        }
      }
    }
    return config
  }
  destroy(url) {
    delete this.queue[url]
  }
  interceptors(instance, url) {
    // 请求拦截
    instance.interceptors.request.use(config => {
      this.queue[url] = true
      return config
    }, error => {
      return Promise.reject(error)
    })
    // 响应拦截
    instance.interceptors.response.use(res => {
      this.destroy(url)
      const {
        data,
        status
      } = res
      if (data.code && data.code !== 200) {
        vueInstance.$Modal.error({
          title: data.code,
          content: data.message || data.error || '系统出错'
        })
      }
      return {
        data,
        status
      }
    }, error => {
      this.destroy(url)
      return Promise.reject(error)
    })
  }
  request(options) {
    const instance = axios.create()

    if (!options['method']) { //没有method的请求为get，判断为get请求
      if (!options['params']) { //如果这个请求本身不带参数
        Object.assign(options, {   //给options这个对象添加一个params的参数，属性为timestamp,值为时间戳
          params: {
            timestamp: new Date().getTime()
          }
        })
      } else {
        Object.assign(options.params, { //如果get请求本身带有参数，给options.params 再添加一个key值timestamp,值为时间戳
          timestamp: new Date().getTime()
        })
      }
    }
    options = Object.assign(this.getInsideConfig(), options)
    this.interceptors(instance, options.url)
    return instance(options)
  }
}
export default HttpRequest //返回HttpRequest对象

广州vi设计公司http://www.maiqicn.com 办公资源网站大全 https://www.wode007.com

由于时间仓促，这段代码没有做太多优化，只给大家提供思路。