tft每日頭條

 > 生活

 > vue如何攔截請求

vue如何攔截請求

生活 更新时间:2025-01-27 02:32:47

項目類型:VUE vux axios

剛開始,把Axios封裝在了http.js文件裡面,然後為了使用VUX的提示框消息,把攔截器直接寫在了main.js裡面。直接調用接口,一切正常。

然而因為返回值有統一的code錯誤代碼提示,所以在攔截器裡面加入了code的判斷以便統一返回值。剛開始一切都是按照預期的結果來走的。就在一個夜黑風高的晚上,我頭暈眼花的按F5手動刷新了一下頁面,驚奇的發現攔截器失效了,并沒有攔截外面的Coode Json代碼層,而是直接把服務器的全部json數據劈頭蓋臉的砸在了我的臉上。一臉懵逼的我以為是接口的問題,可是在組件裡面直接用console.log打印出來的數據又是對的。

vue如何攔截請求(關于VUE在封裝了Axios後手動刷新頁面攔截器無效的問題)1

然後我突然想到了一個問題,直接點擊頁面返回的話,确實是OK的,但是如果按F5手動刷新的話,Axios并不會直接走main.js裡面的攔截器代碼。

後來我把攔截器放在了封裝的http.js裡面,結果就一切正常了,不過郁悶的是放在了外面以後,vux的提示插件沒有辦法用了。

打印了this指針,果不其然的undefind了,後來想到了一個比較變通的方法,我在index.html裡面增加了一個var app用來存儲main裡面初始化的vue對象,并且在main.js裡面把初始化的vue對象給賦值到windows.app上面,這樣全局都可以使用了。

vue如何攔截請求(關于VUE在封裝了Axios後手動刷新頁面攔截器無效的問題)2

把vux的提示代碼加上window.app.$vux.toast.show 完美解決問題!

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2025 - www.tftnews.com All Rights Reserved