攔截請(qǐng)求是Vue中非常重要的概念之一，它的存在可以讓我們方便地對(duì)頁(yè)面中的數(shù)據(jù)進(jìn)行統(tǒng)一處理，比如數(shù)據(jù)的加密和解密、數(shù)據(jù)的校驗(yàn)等。實(shí)現(xiàn)攔截請(qǐng)求的方式有很多種，今天我要介紹的是在Vue中實(shí)現(xiàn)攔截請(qǐng)求的兩種方式：1、使用Axios攔截器；2、使用Vue自帶的Interceptors。

使用Axios攔截器

//Axios的攔截器
axios.interceptors.request.use(function (config) {
// 在發(fā)送請(qǐng)求之前進(jìn)行處理
if(config.method  === 'post' ){
config.data = qs.stringify(config.data);
}
return config;
}, function (error) {
// 對(duì)請(qǐng)求錯(cuò)誤進(jìn)行處理
return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
// 對(duì)響應(yīng)數(shù)據(jù)做處理
return response;
}, function (error) {
// 對(duì)響應(yīng)錯(cuò)誤進(jìn)行處理
return Promise.reject(error);
});

使用Vue自帶的Interceptors

//Vue的攔截器
Vue.http.interceptors.push(function(request, next) {
// 這里可以對(duì)Ajax的請(qǐng)求進(jìn)行全局的預(yù)處理
if(request.method === 'POST') {
request.body.phone = request.body.phone.toString().replace(/\D/g,''); //處理手機(jī)號(hào)
request.body.password = md5(request.body.password);//處理密碼
}
next(function(response) {
// 這里可以對(duì)Ajax的響應(yīng)結(jié)果進(jìn)行全局的處理
});
});

以上就是介紹Vue中實(shí)現(xiàn)攔截請(qǐng)求的兩種方式，它們的實(shí)現(xiàn)原理類似，唯一的不同就是哪個(gè)庫(kù)來(lái)提供了攔截器的實(shí)現(xiàn)，一個(gè)是Axios，一個(gè)是Vue本身。無(wú)論采用哪種方式，都能夠?yàn)槲覀儙?lái)非常大的便利，讓我們能夠非常方便地對(duì)頁(yè)面中的數(shù)據(jù)進(jìn)行處理和校驗(yàn)。