解決Vue在封裝了Axios后手動(dòng)刷新頁(yè)面攔截器無效的問題
項(xiàng)目類型：vue+vux+axios
剛開始，把Axios封裝在了http.js文件里面，然后為了使用VUX的提示框消息，把攔截器直接寫在了main.js里面。直接調(diào)用接口，一切正常。
然而因?yàn)榉祷刂涤薪y(tǒng)一的code錯(cuò)誤代碼提示，所以在攔截器里面加入了code的判斷以便統(tǒng)一返回值。剛開始一切都是按照預(yù)期的結(jié)果來走的。就在一個(gè)夜黑風(fēng)高的晚上，我頭暈眼花的按F5手動(dòng)刷新了一下頁(yè)面，驚奇的發(fā)現(xiàn)攔截器失效了，并沒有攔截外面的Coode Json代碼層，而是直接把服務(wù)器的全部json數(shù)據(jù)劈頭蓋臉的砸在了我的臉上。一臉懵逼的我以為是接口的問題，可是在組件里面直接用console.log打印出來的數(shù)據(jù)又是對(duì)的。
然后我突然想到了一個(gè)問題，直接點(diǎn)擊頁(yè)面返回的話，確實(shí)是OK的，但是如果按F5手動(dòng)刷新的話，Axios并不會(huì)直接走main.js里面的攔截器代碼。
后來我把攔截器放在了封裝的http.js里面，結(jié)果就一切正常了，不過郁悶的是放在了外面以后，vux的提示插件沒有辦法用了。
打印了this指針，果不其然的undefind了，后來想到了一個(gè)比較變通的方法，我在index.html里面增加了一個(gè)var app用來存儲(chǔ)main里面初始化的vue對(duì)象，并且在main.js里面把初始化的vue對(duì)象給賦值到windows.app上面，這樣全局都可以使用了。
把vux的提示代碼加上window.app.$vux.toast.show 完美解決問題！
總結(jié)
以上所述是小編給大家介紹的解決Vue在封裝了Axios后手動(dòng)刷新頁(yè)面攔截器無效的問題，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
使用D3.js+Vue實(shí)現(xiàn)一個(gè)簡(jiǎn)單的柱形圖
這篇文章主要介紹了使用D3.js+Vue實(shí)現(xiàn)一個(gè)簡(jiǎn)單的柱形圖,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
Mock.js在Vue項(xiàng)目中的使用小結(jié)
這篇文章主要介紹了Mock.js在Vue項(xiàng)目中的使用,在vue.config.js中配置devServer，在before屬性中引入接口路由函數(shù)，詳細(xì)步驟跟隨小編通過本文學(xué)習(xí)吧2022-07-07
本文主要介紹了VUE中Non-Props屬性的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
使用vue-draggable-plus實(shí)現(xiàn)拖拽排序
最近遇到一個(gè)需求,在 Vue3 的一個(gè) H5 頁(yè)面當(dāng)中點(diǎn)擊拖拽圖標(biāo)上下拖動(dòng) tab 子項(xiàng),然后點(diǎn)擊保存可以保存最新的 tab 項(xiàng)順序,同事說可以用 vue-draggable-plus 這個(gè)庫(kù)來實(shí)現(xiàn)拖拽,所以本文給大家介紹了如何使用vue-draggable-plus實(shí)現(xiàn)拖拽排序,需要的朋友可以參考下2024-01-01
本篇文章主要介紹了vue引入swiper插件的使用實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
本文詳細(xì)介紹了如何在計(jì)算機(jī)上安裝和配置Node.js,包括下載Node.js,驗(yàn)證安裝成功,配置npm的全局模塊目錄和緩存目錄,設(shè)置環(huán)境變量,配置npm鏡像,安裝Vue.js等步驟,通過這些指導(dǎo),你可以在IDEA上成功創(chuàng)建和運(yùn)行Vue項(xiàng)目2024-10-10
Vue3的ts報(bào)錯(cuò):類型"{}"上不存在屬性"xxx"的兩種徹底根治解決方法
這篇文章主要給大家介紹了關(guān)于Vue3的ts報(bào)錯(cuò):類型"{}"上不存在屬性"xxx"的兩種徹底根治解決方法,這是最近做項(xiàng)目中遇到的一個(gè)問題,這里給大家總結(jié)下解決辦法,需要的朋友可以參考下2023-08-08
本文給大家詳細(xì)講述了Vue2.0中集成UEditor富文本編輯器的方法以及相關(guān)注意事項(xiàng)做了講述，有興趣的朋友學(xué)習(xí)下。2018-03-03
這篇文章主要介紹了vue實(shí)現(xiàn)路由切換改變title功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
vuejs選中當(dāng)前樣式active的實(shí)例
今天小編就為大家分享一篇vuejs選中當(dāng)前樣式active的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08