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

57次阅读

共计 1532 个字符，预计需要花费 4 分钟才能阅读完成。

最近做项目遇到一款浏览器，由于缓存了 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 对象