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

前端  /  管理员 发布于 6年前   330

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

解决方法在代码最下方：

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对象

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