vue axios登錄請求攔截器
當(dāng)我們在做接口請求時,比如判斷登錄超時時候,通常是接口返回一個特定的錯誤碼,那如果我們每個接口都去判斷一個耗時耗力,這個時候我們可以用攔截器去進(jìn)行統(tǒng)一的http請求攔截。
1.安裝配置axios
cnpm install --save axios
我們可以建一個js文件來做這個統(tǒng)一的處理,新建一個axios.js,如下
import axios from 'axios' import { Indicator } from 'mint-ui'; import { Toast } from 'mint-ui'; // http request 攔截器 axios.interceptors.request.use( config => { Indicator.open() return config; }, err => { Indicator.close() return Promise.reject(err); }); // http response 攔截器 axios.interceptors.response.use( response => { Indicator.close() return response; }, error => { Indicator.close() }); export default axios
然后在main.js中引入這個js文件
import axios from './axio'; Vue.prototype.$axios = axios;
這樣就可以使用axios去請求了,在組件中可以用this.axios去調(diào)用
this.$axios({ url:requestUrl+'homePage/v1/indexNewPropertiesResult', method:'POST', }).then(function(response){ //接口返回?cái)?shù)據(jù) console.log(response) that.modulesArr=response.data.data.modules; // that.getRecommendGoods(0); });
只有用axios請求接口,才能去攔截,現(xiàn)在已經(jīng)能在axios.js中攔截到了,可以在兩個狀態(tài)中做你需要的操作
補(bǔ)充:
axios使用攔截器統(tǒng)一處理所有的http請求
axios使用攔截器
在請求或響應(yīng)被 then 或 catch 處理前攔截它們。
•http request攔截器
// 添加請求攔截器 axios.interceptors.request.use(function (config) { // 在發(fā)送請求之前做些什么 return config; }, function (error) { // 對請求錯誤做些什么 return Promise.reject(error); });
•http respones攔截器
// 添加響應(yīng)攔截器 axios.interceptors.response.use(function (response) { // 對響應(yīng)數(shù)據(jù)做點(diǎn)什么 return response; }, function (error) { // 對響應(yīng)錯誤做點(diǎn)什么 return Promise.reject(error); });
•移除攔截器
var myInterceptor = axios.interceptors.request.use(function () {/*...*/}); axios.interceptors.request.eject(myInterceptor);
•為自定義axios實(shí)例添加攔截器
var instance = axios.create(); instance.interceptors.request.use(function () {/*...*/});
總結(jié)
以上所述是小編給大家介紹的vue axios登錄請求攔截器,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
Vue?Baidu?Map之自定義點(diǎn)圖標(biāo)bm-marker的示例
這篇文章主要介紹了Vue?Baidu?Map之自定義點(diǎn)圖標(biāo)bm-marker,文中給大家介紹了vue-baidu-api地圖標(biāo)記點(diǎn)(自定義標(biāo)記圖標(biāo)),設(shè)置標(biāo)記點(diǎn)的優(yōu)先級問題,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08Vue3中的setup語法糖、computed函數(shù)、watch函數(shù)詳解
這篇文章主要介紹了Vue3中的setup語法糖、computed函數(shù)、watch函數(shù),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03vue中的$emit 與$on父子組件與兄弟組件的之間通信方式
本文主要對vue 用$emit 與 $on 來進(jìn)行組件之間的數(shù)據(jù)傳輸。重點(diǎn)給大家介紹vue中的$emit 與$on父子組件與兄弟組件的之間通信方式,感興趣的朋友一起看看2018-05-05Vue金融數(shù)字格式化(并保留小數(shù))數(shù)字滾動效果實(shí)現(xiàn)
這篇文章主要介紹了Vue金融數(shù)字格式化(并保留小數(shù)) 數(shù)字滾動效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04Vue3封裝組件完整實(shí)例(帶回調(diào)事件)
Vue.js已成為現(xiàn)代Web開發(fā)中不可或缺的技術(shù)之一,雖然Vue.js的一些基礎(chǔ)概念和語法比較易學(xué),但深入挖掘Vue.js的核心概念和功能需要更多的實(shí)踐,下面這篇文章主要給大家介紹了關(guān)于Vue3封裝組件(帶回調(diào)事件)的相關(guān)資料,需要的朋友可以參考下2023-06-06基于Vue.js實(shí)現(xiàn)簡潔的多屏切換效果
在實(shí)際開發(fā)中,多屏切換是常見的需求,尤其是在需要展示大量內(nèi)容或信息時,下面我將向大家展示我是如何實(shí)現(xiàn)三屏,并通過動態(tài)按鈕控制切換屏幕的,感興趣的小伙伴跟著小編一起來看看吧2024-09-09Vue中的Object.defineProperty全面理解
這篇文章主要介紹了Vue中的Object.defineProperty全面理解,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04