在使用Vue時,我們常常需要對網絡請求進行攔截和處理。Vue提供了一個非常有用的攔截器(interceptors)功能,它可以幫助我們在每個HTTP請求/響應時添加或修改參數。
要使用interceptors,我們需要在Vue.prototype上調用Vue.http.interceptors這個方法:
Vue.prototype.$http.interceptors.request.use(
config =>{
// 在此處添加請求的配置信息
return config;
},
error =>{
// 處理請求失敗的情況
return Promise.reject(error);
}
);
Vue.prototype.$http.interceptors.response.use(
response =>{
// 在此處添加響應的處理邏輯
return response;
},
error =>{
// 處理響應失敗的情況
return Promise.reject(error);
}
);
在這里,我們定義了兩個攔截器對象——一個請求攔截器和一個響應攔截器。在請求攔截器中,我們可以通過修改config對象來更改請求的參數。在響應攔截器中,我們可以通過修改response對象或者拋出異常來處理響應的結果。
例如,我們可以添加一個請求攔截器來更改請求的Content-Type:
Vue.prototype.$http.interceptors.request.use(
config =>{
config.headers['Content-Type'] = 'application/json;charset=UTF-8';
return config;
},
error =>{
return Promise.reject(error);
}
);
這樣,每次我們發送請求時,都會將Content-Type設置為application/json;charset=UTF-8。
除此之外,我們還可以在攔截器中添加邏輯判斷,根據不同的條件來更改請求參數。例如,我們可以添加一個請求攔截器來驗證用戶是否登陸:
Vue.prototype.$http.interceptors.request.use(
config =>{
if (localStorage.token) {
config.headers.Authorization = 'Bearer ' + localStorage.token;
}
return config;
},
error =>{
return Promise.reject(error);
}
);
這樣,當用戶已經登陸時,我們會在請求頭中添加Authorization參數,并將其值設置為localStorage中存儲的token。
總的來說,Vue的interceptors功能為我們提供了一個簡單而有力的工具,幫助我們優化了網站的網絡請求,更好地完成業務邏輯。我們可以根據實際需求來添加請求、響應攔截器,在這些攔截器中加入更多的邏輯,以滿足不同的業務場景。