當我們在做接口請求時，比如判斷登錄超時時候，通常是接口返回一個特定的錯誤碼，那如果我們每個接口都去判斷一個耗時耗力，這個時候我們可以用攔截器去進行統一的http請求攔截。
1.安裝配置axios
cnpm install --save axios
我們可以建一個js文件來做這個統一的處理，新建一個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去調用
this.$axios({ url:requestUrl+'homePage/v1/indexNewPropertiesResult', method:'POST', }).then(function(response){ //接口返回數據 console.log(response) that.modulesArr=response.data.data.modules; // that.getRecommendGoods(0); }); 只有用axios請求接口，才能去攔截，現在已經能在axios.js中攔截到了，可以在兩個狀態中做你需要的操作
補充：
axios使用攔截器統一處理所有的http請求
axios使用攔截器
在請求或響應被 then 或 catch 處理前攔截它們。
•http request攔截器
// 添加請求攔截器axios.interceptors.request.use(function (config) { // 在發送請求之前做些什么 return config; }, function (error) { // 對請求錯誤做些什么 return Promise.reject(error); });•http respones攔截器
// 添加響應攔截器axios.interceptors.response.use(function (response) { // 對響應數據做點什么 return response; }, function (error) { // 對響應錯誤做點什么 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 () {/*...*/});總結
以上所述是小編給大家介紹的vue axios登錄請求攔截器，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
