Vue.js 是一個(gè)開(kāi)源的前端框架,它采用了 MVVM 模式和組件化開(kāi)發(fā)。Axios 則是一個(gè)基于 Promise 的 HTTP 客戶端,可以在瀏覽器和 Node.js 中使用。在 Vue.js 開(kāi)發(fā)過(guò)程中,使用 Axios 做數(shù)據(jù)請(qǐng)求十分常見(jiàn)。但是,在有些情況下我們需要對(duì)請(qǐng)求或響應(yīng)進(jìn)行處理,這個(gè)時(shí)候就需要使用 Axios 的攔截器。
通過(guò)攔截器可以攔截到請(qǐng)求和響應(yīng),并在攔截器中進(jìn)行一些操作。通常我們需要在請(qǐng)求發(fā)送前添加一些請(qǐng)求頭信息,或在響應(yīng)回來(lái)后對(duì)響應(yīng)做一些處理,這時(shí)就可以使用 Axios 的攔截器。
//添加攔截器,通過(guò) axios.interceptors.request.use 方法來(lái)添加請(qǐng)求攔截器
axios.interceptors.request.use(
config =>{
// 在請(qǐng)求發(fā)出之前進(jìn)行一些操作
config.headers.Authorization = getToken();
return config;
},
error =>{
// 對(duì)請(qǐng)求錯(cuò)誤做些什么
return Promise.reject(error);
}
);
//添加響應(yīng)攔截器
axios.interceptors.response.use(
response =>{
// 對(duì)響應(yīng)數(shù)據(jù)做些操作
return response;
},
error =>{
// 對(duì)響應(yīng)錯(cuò)誤做些什么
return Promise.reject(error);
}
);
在以上示例中,我們?cè)谡?qǐng)求攔截器中為請(qǐng)求添加了一個(gè) Authorization 請(qǐng)求頭,并在響應(yīng)攔截器中對(duì)響應(yīng)數(shù)據(jù)進(jìn)行了處理。在實(shí)際項(xiàng)目中,我們可以根據(jù)具體需求來(lái)添加攔截器,并在攔截器中進(jìn)行一些操作,從而更好地滿足項(xiàng)目的需求。