vue+axios制作登录请求拦截

当我们在做接口请求时，比如判断登录超时时候，通常是接口返回一个特定的错误码，那如果我们每个接口都去判断一个耗时耗力，这个时候我们可以用去进行统一的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 () {/*...*/});

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

Vue项目分环境打包步奏详解

使用Angular2时避免Dom误区