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

由於時間倉促,這段代碼沒有做太多優化,只給大家提供思路。 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM