vue axios登錄請求攔截器
更新時間：2018年04月02日 11:20:31 投稿：mrr
這篇文章主要介紹了vue axios登錄請求攔截器，判斷是否登錄超時，或?qū)φ埱蠼Y(jié)果做一個統(tǒng)一處理的教程詳解,需要的朋友可以參考下
當我們在做接口請求時，比如判斷登錄超時時候，通常是接口返回一個特定的錯誤碼，那如果我們每個接口都去判斷一個耗時耗力，這個時候我們可以用攔截器去進行統(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){ //接口返回數(shù)據(jù)
console.log(response)
that.modulesArr=response.data.data.modules;
// that.getRecommendGoods(0);
});
只有用axios請求接口，才能去攔截，現(xiàn)在已經(jīng)能在axios.js中攔截到了，可以在兩個狀態(tài)中做你需要的操作
補充：
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ù)做點什么
return response;
}, function (error) {
// 對響應(yīng)錯誤做點什么
return Promise.reject(error);
});
•移除攔截器
var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
•為自定義axios實例添加攔截器
var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});
總結(jié)
以上所述是小編給大家介紹的vue axios登錄請求攔截器，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
在 Vue2 項目中,ElementUI 的 el-form 組件是常用的表單組件,它提供了豐富的功能和樣式,可以滿足各種需求,本文給大家介紹Vue2+ElementUI表單、Form組件的封裝過程,感興趣的朋友跟隨小編一起看看吧2024-03-03
下面小編就為大家分享一篇關(guān)閉Vue計算屬性自帶的緩存功能方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
require是node中的一個方法,他的作用是用于引入模塊、 JSON、或本地靜態(tài)文件,這篇文章主要介紹了vue中的require使用,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了用Vue編寫抽象組件的方法,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家介紹了vue基于electron構(gòu)建第一個程序過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
一文快速學(xué)會阻止事件冒泡的4種方法(原生js阻止,vue中使用修飾符阻止)
冒泡就是事件開始是由最具體的元素接收,然后逐層向上級傳播到較為不具體的元素,這篇文章主要給大家介紹了關(guān)于阻止事件冒泡的4種方法,文中介紹的方法分別是原生js阻止以及vue中使用修飾符阻止的相關(guān)資料,需要的朋友可以參考下2023-12-12
Vue?Router動態(tài)路由實現(xiàn)實現(xiàn)更靈活的頁面交互
Vue?Router是Vue.js官方的路由管理器,用于構(gòu)建SPA（單頁應(yīng)用程序）,本文將深入探討Vue?Router的動態(tài)路由功能,希望可以幫助大家更好地理解和應(yīng)用Vue.js框架2024-02-02
vue-router跳轉(zhuǎn)時打開新頁面的兩種方法
這篇文章主要給大家介紹了關(guān)于vue-router跳轉(zhuǎn)時打開新頁面的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用vue-router具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
vue實現(xiàn)導(dǎo)航欄效果(選中狀態(tài)刷新不消失)
這篇文章主要為大家詳細介紹了vue實現(xiàn)導(dǎo)航欄效果，選中狀態(tài)刷新不消失，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
elementui中tabel組件的scope.$index的使用及說明
這篇文章主要介紹了elementui中tabel組件的scope.$index的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10