解決Vue在封裝了Axios后手動刷新頁面攔截器無效的問題
項目類型：vue+vux+axios
剛開始，把Axios封裝在了http.js文件里面，然后為了使用VUX的提示框消息，把攔截器直接寫在了main.js里面。直接調(diào)用接口，一切正常。
然而因為返回值有統(tǒng)一的code錯誤代碼提示，所以在攔截器里面加入了code的判斷以便統(tǒng)一返回值。剛開始一切都是按照預期的結(jié)果來走的。就在一個夜黑風高的晚上，我頭暈眼花的按F5手動刷新了一下頁面，驚奇的發(fā)現(xiàn)攔截器失效了，并沒有攔截外面的Coode Json代碼層，而是直接把服務(wù)器的全部json數(shù)據(jù)劈頭蓋臉的砸在了我的臉上。一臉懵逼的我以為是接口的問題，可是在組件里面直接用console.log打印出來的數(shù)據(jù)又是對的。
然后我突然想到了一個問題，直接點擊頁面返回的話，確實是OK的，但是如果按F5手動刷新的話，Axios并不會直接走main.js里面的攔截器代碼。
后來我把攔截器放在了封裝的http.js里面，結(jié)果就一切正常了，不過郁悶的是放在了外面以后，vux的提示插件沒有辦法用了。
打印了this指針，果不其然的undefind了，后來想到了一個比較變通的方法，我在index.html里面增加了一個var app用來存儲main里面初始化的vue對象，并且在main.js里面把初始化的vue對象給賦值到windows.app上面，這樣全局都可以使用了。
把vux的提示代碼加上window.app.$vux.toast.show 完美解決問題！
總結(jié)
以上所述是小編給大家介紹的解決Vue在封裝了Axios后手動刷新頁面攔截器無效的問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
基于Electron24+Vite4+Vue3搭建桌面端應用實戰(zhàn)教程
這篇文章主要介紹了基于Electron24+Vite4+Vue3搭建桌面端應用,這次給大家主要分享的是基于electron最新版本整合vite4.x構(gòu)建vue3桌面端應用程序，需要的朋友可以參考下2023-05-05
Vue實現(xiàn)登錄保存token并校驗實現(xiàn)保存登錄狀態(tài)的操作代碼
這篇文章主要介紹了Vue實現(xiàn)登錄保存token并校驗實現(xiàn)保存登錄狀態(tài),本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-02-02
在看這篇文章的幾點要求：需要你先知道Vuex與Vue-Router是個什么東西，用來解決什么問題，以及它的基本使用。如果你還不懂的話，建議上官網(wǎng)了解下Vuex與Vue-Router的基本使用后再回來看這篇文章2022-11-11
基于Vue?+?ElementUI實現(xiàn)可編輯表格及校驗
這篇文章主要給大家介紹了基于Vue?+?ElementUI?實現(xiàn)可編輯表格及校驗,文中有詳細的代碼講解和實現(xiàn)思路,講解的非常詳細,有需要的朋友可以參考下2023-08-08
cross-env是跨平臺設(shè)置和使用環(huán)境變量的腳本。這篇文章主要介紹了vue中cross-env的使用,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了使用canvas實現(xiàn)一個vue彈幕組件功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了詳解vue-router 命名路由和命名視圖,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了vue中格式化element表格中的時間為指定格式,需要的朋友可以參考下2022-05-05
這篇文章主要為大家詳細介紹了Vue實現(xiàn)嵌套菜單組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了vue如何將字符串的一部分處理為html文檔并渲染到頁面，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06