vue axios登錄請(qǐng)求攔截器
當(dāng)我們?cè)谧鼋涌谡?qǐng)求時(shí)，比如判斷登錄超時(shí)時(shí)候，通常是接口返回一個(gè)特定的錯(cuò)誤碼，那如果我們每個(gè)接口都去判斷一個(gè)耗時(shí)耗力，這個(gè)時(shí)候我們可以用攔截器去進(jìn)行統(tǒng)一的http請(qǐng)求攔截。
1.安裝配置axios
cnpm install --save axios
我們可以建一個(gè)js文件來(lái)做這個(gè)統(tǒng)一的處理，新建一個(gè)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中引入這個(gè)js文件
import axios from './axio'; Vue.prototype.$axios = axios;
這樣就可以使用axios去請(qǐng)求了，在組件中可以用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請(qǐng)求接口，才能去攔截，現(xiàn)在已經(jīng)能在axios.js中攔截到了，可以在兩個(gè)狀態(tài)中做你需要的操作
補(bǔ)充：
axios使用攔截器統(tǒng)一處理所有的http請(qǐng)求
axios使用攔截器
在請(qǐng)求或響應(yīng)被 then 或 catch 處理前攔截它們。
•http request攔截器
// 添加請(qǐng)求攔截器
axios.interceptors.request.use(function (config) {
// 在發(fā)送請(qǐng)求之前做些什么
return config;
}, function (error) {
// 對(duì)請(qǐng)求錯(cuò)誤做些什么
return Promise.reject(error);
});
•http respones攔截器
// 添加響應(yīng)攔截器
axios.interceptors.response.use(function (response) {
// 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
return response;
}, function (error) {
// 對(duì)響應(yīng)錯(cuò)誤做點(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登錄請(qǐng)求攔截器，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(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)先級(jí)問(wèn)題，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue獲取input值的三種常用寫(xiě)法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue3中的setup語(yǔ)法糖、computed函數(shù)、watch函數(shù)詳解
這篇文章主要介紹了Vue3中的setup語(yǔ)法糖、computed函數(shù)、watch函數(shù),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
vue中的$emit 與$on父子組件與兄弟組件的之間通信方式
本文主要對(duì)vue 用$emit 與 $on 來(lái)進(jìn)行組件之間的數(shù)據(jù)傳輸。重點(diǎn)給大家介紹vue中的$emit 與$on父子組件與兄弟組件的之間通信方式，感興趣的朋友一起看看2018-05-05
Vue金融數(shù)字格式化(并保留小數(shù))數(shù)字滾動(dòng)效果實(shí)現(xiàn)
這篇文章主要介紹了Vue金融數(shù)字格式化(并保留小數(shù)) 數(shù)字滾動(dòng)效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
Vue3封裝組件完整實(shí)例(帶回調(diào)事件)
Vue.js已成為現(xiàn)代Web開(kāi)發(fā)中不可或缺的技術(shù)之一,雖然Vue.js的一些基礎(chǔ)概念和語(yǔ)法比較易學(xué),但深入挖掘Vue.js的核心概念和功能需要更多的實(shí)踐,下面這篇文章主要給大家介紹了關(guān)于Vue3封裝組件(帶回調(diào)事件)的相關(guān)資料,需要的朋友可以參考下2023-06-06
基于Vue.js實(shí)現(xiàn)簡(jiǎn)潔的多屏切換效果
在實(shí)際開(kāi)發(fā)中,多屏切換是常見(jiàn)的需求,尤其是在需要展示大量?jī)?nèi)容或信息時(shí),下面我將向大家展示我是如何實(shí)現(xiàn)三屏,并通過(guò)動(dòng)態(tài)按鈕控制切換屏幕的,感興趣的小伙伴跟著小編一起來(lái)看看吧2024-09-09
Vue中的Object.defineProperty全面理解
這篇文章主要介紹了Vue中的Object.defineProperty全面理解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vuex是一個(gè)專為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于Vue中狀態(tài)管理器(vuex)詳解以及實(shí)際應(yīng)用場(chǎng)景的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要介紹了uniapp中uni-load-more的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05