攔截請求是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本身。無論采用哪種方式，都能夠為我們帶來非常大的便利，讓我們能夠非常方便地對頁面中的數據進行處理和校驗。