当前位置: 首页 > Web前端 > HTML

vueaxios不缓存get请求(防止没有更新数据就返回304)

时间:2023-04-02 16:49:40 HTML

最近在做项目的时候遇到了浏览器。因为get请求被缓存了,数据怎么刷新都不会更新。下面分享一下解决方案:解决方案是在每个get请求中添加一个时间戳参数,值为时间戳,但是我们不想在每个请求中都添加,所以希望全局配置。解决方法在代码最下方importaxiosfrom'axios'//import{Spin}from'iview'import{getToken}from'@/libs/util'importVuefrom'vue'constvueInstance=newVue()classHttpRequest{constructor(baseUrl=baseURL){this.baseUrl=baseUrlthis.queue={}}getInsideConfig(){constconfig={baseURL:this.baseUrl,timeout:60000,headers:{授权:getToken()||'',post:{'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'}}}returnconfig}destroy(url){deletethis.queue[url]}拦截器(instance,url){//请请求拦截instance.interceptors.request.use(config=>{this.queue[url]=truereturnconfig},error=>{returnPromise.reject(error)})//响应拦截instance.interceptors.response.use(res=>{this.destroy(url)const{data,status}=resif(data.code&&data.code!==200){vueInstance.$Modal.error({title:data.code,content:data.message||data.error||'systemerror'})}return{data,status}},error=>{this.destroy(url)returnPromise.reject(error)})}request(options){constinstance=axios.create()if(!options['method']){//没有方法的请求是get,判断为get请求if(!options['params']){//如果请求本身没有参数Object.assign(options,{//给options对象添加一个params参数,属性为时间戳,以及thevalueistimeStampparams:{timestamp:newDate().getTime()}})}else{Object.assign(options.params,{//如果get请求本身有参数,在options中再增加一个key值timestamp.params,Valueistimestamptimestamp:newDate().getTime()})}}options=Object.assign(this.getInsideConfig(),options)this.interceptors(instance,options.url)returninstance(options)}}exportdefaultHttpRequest//由于时间仓促,返回HttpRequest对象,th是段落代码没有做太多优化,只是给大家提供思路