關於vue中axios攔截器的使用
阿新 • • 發佈:2019-01-24
Axios攔截器使用
預期目標:解決請求任意介面之前進行統一攔截判斷,看是否返回500或404等錯誤並在頁面給出錯誤提示。
一、剛開始看官方文件,如下:
備註:將程式碼加到頁面中發現並未起作用,百度谷歌搜尋一番,發現都是千篇一律,不同之處可能就是對返回狀態碼的處理不一樣,並未解決攔截器不起作用的問題。
在這期間也嘗試了將攔截器單獨提出來寫出一個http.js然後再將其掛載到vue的原型上,還是不能解決問題。
二、嘗試配置全域性的baseURL,程式碼如下:
備註:可以進入攔截器並作出響應,解決了攔截器不起作用的問題,但是這樣寫又存在另外一個問題,因為我們整個專案的介面配置採用的是建立axios例項的方式,難以實現對每個介面固定
結果:雖然可以攔截,但無法攔截每一個介面的請求,只是攔截了全域性配置baseURL
三、為自己建立的axios例項新增攔截器
備註:也就是說,文件上的axios.interceptors寫法,針對的是全域性的baseURL,而我們之前沒有配置全域性的baseURL,一開始檢測不到就老是報錯。配置了全域性的好了但是達不到我們的要求。
結果:如果說,你採用的是建立例項的方法進行整個api介面的配置管理,那就要用例項名稱點interceptors的方式去新增攔截器,而不是axios.interceptors