拦截请求是Vue中非常重要的概念之一，它的存在可以让我们方便地对页面中的数据进行统一处理，比如数据的加密和解密、数据的校验等。实现拦截请求的方式有很多种，今天我要介绍的是在Vue中实现拦截请求的两种方式：1、使用Axios拦截器；2、使用Vue自带的Interceptors。

使用Axios拦截器

//Axios的拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前进行处理
if(config.method  === 'post' ){
config.data = qs.stringify(config.data);
}
return config;
}, function (error) {
// 对请求错误进行处理
return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
// 对响应数据做处理
return response;
}, function (error) {
// 对响应错误进行处理
return Promise.reject(error);
});

使用Vue自带的Interceptors

//Vue的拦截器
Vue.http.interceptors.push(function(request, next) {
// 这里可以对Ajax的请求进行全局的预处理
if(request.method === 'POST') {
request.body.phone = request.body.phone.toString().replace(/\D/g,''); //处理手机号
request.body.password = md5(request.body.password);//处理密码
}
next(function(response) {
// 这里可以对Ajax的响应结果进行全局的处理
});
});

以上就是介绍Vue中实现拦截请求的两种方式，它们的实现原理类似，唯一的不同就是哪个库来提供了拦截器的实现，一个是Axios，一个是Vue本身。无论采用哪种方式，都能够为我们带来非常大的便利，让我们能够非常方便地对页面中的数据进行处理和校验。