Vue的攔截器(interceptors)比較常用于處理HTTP請求。在發(fā)送請求或響應(yīng)之前，攔截器可以攔截并處理它們。Vue提供了Axios攔截器幫助我們實現(xiàn)相關(guān)的功能。下面是一個簡單的例子:

axios.interceptors.request.use((config) =>{
// 在請求發(fā)送之前做些什么
return config;
}, (error) =>{
// 對請求錯誤做些什么
return Promise.reject(error);
});
axios.interceptors.response.use((response) =>{
// 在響應(yīng)之前做些什么
return response;
}, (error) =>{
// 對響應(yīng)錯誤做些什么
return Promise.reject(error);
});

請求攔截器(interceptors.request)和響應(yīng)攔截器(interceptors.response)都使用了axios.interceptors，其中config是請求配置對象，response是響應(yīng)對象。

如果需要添加通用HTTP請求頭，我們可以在請求攔截器中添加：

axios.interceptors.request.use((config) =>{
// 在請求發(fā)送之前做些什么
config.headers.Authorization = getToken();
return config;
}, (error) =>{
// 對請求錯誤做些什么
return Promise.reject(error);
});

另外，如果需要對每個請求添加類似loading的全局狀態(tài)，我們可以在請求攔截器中添加：

axios.interceptors.request.use((config) =>{
// 在請求發(fā)送之前做些什么
store.commit('SET_LOADING', true);
return config;
}, (error) =>{
// 對請求錯誤做些什么
return Promise.reject(error);
});
axios.interceptors.response.use((response) =>{
// 在響應(yīng)之前做些什么
store.commit('SET_LOADING', false);
return response;
}, (error) =>{
// 對響應(yīng)錯誤做些什么
store.commit('SET_LOADING', false);
return Promise.reject(error);
});

以上代碼會在每個請求發(fā)送前設(shè)置全局狀態(tài)為loading，請求完成后取消loading。

攔截器(interceptors)給我們提供了一種非常方便的方式來處理HTTP請求和響應(yīng)，它可以幫助我們管理和控制數(shù)據(jù)。對于Vue應(yīng)用程序來說，它是不可或缺的工具。