vue axios不緩存get請求(防止返回304不更新數據)

最近做項目遇到一款瀏覽器,由於緩存了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對象

由於時間倉促,這段代碼沒有做太多優化,只給大家提供思路。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章