在開發(fā)vue項(xiàng)目中，請求是不可缺少的，在發(fā)送請求時(shí)常常需要統(tǒng)一處理一些請求頭參數(shù)等設(shè)置與響應(yīng)事件，這時(shí)利用請求攔截器再好不過。

這里以axios請求為例

實(shí)現(xiàn)了設(shè)置統(tǒng)一請求頭添加token, 其中token在登錄時(shí)被存入了localStorage中。

同時(shí)攔截器利用new cancelToken與定義的cancelPending方法實(shí)現(xiàn)了可以取消正在pending狀態(tài)的請求，什么情況會需要取消請求呢？

如下兩種情況：

1.?有一個(gè)局部分頁時(shí)，用戶快速點(diǎn)擊第2頁，然后繼續(xù)點(diǎn)擊第3頁，如果網(wǎng)絡(luò)不太穩(wěn)定時(shí)，第2頁的請求正在發(fā)送中，還未響應(yīng)，但第3頁的請求先響應(yīng)了，過了一會第2?頁請求才響應(yīng)，這時(shí)用戶處于第3頁，但看到的數(shù)據(jù)確是第2頁的，當(dāng)然有人會說可以在發(fā)送請求過程中禁用掉分頁按鈕點(diǎn)擊，但我感覺體驗(yàn)不太好，為何禁用呢，直接點(diǎn)擊第3頁時(shí)中斷掉之前相同的請求即可。

2.?切換路由時(shí)，上一路由頁面中仍有未響應(yīng)的請求時(shí)切換了路由，應(yīng)該把正在pending的所有請求中斷取消掉。

?

下面是完整實(shí)現(xiàn)axios請求攔截器與取消pending請求功能的代碼

let pending = []; let cancelToken = axios.CancelToken; let cancelPending = (config) => { pending.forEach((item, index) => { if(!!config){ if(item.u == config.url){ item.f(); //取消請求 pending.splice(index, 1); //移除當(dāng)前請求記錄 }; }else{ item.f(); //取消請求 pending.splice(index, 1); //移除當(dāng)前請求記錄 } }); };//驗(yàn)證登錄狀態(tài) router.beforeEach((to, from, next) => { //如果是需要驗(yàn)證登錄狀態(tài)的頁面 if(to.matched.some(record => record.meta.requireAuth)){ let token = localStorage.getItem('token'); //如果已經(jīng)登錄，則正常進(jìn)入 if(!!token){ cancelPending(); next(); }else{ next({'name': 'login', 'query': {'redirect': to.fullPath}}); }; }else if(to.name == 'login'){ //如果是登錄頁，則驗(yàn)證如果當(dāng)前是登錄狀態(tài)自動跳轉(zhuǎn)至系統(tǒng)主頁，否則正常進(jìn)入登錄頁 let token = localStorage.getItem('token'); //如果已經(jīng)登錄，則重定向至系統(tǒng)首頁 if(!!token){ router.push({'name': 'SystemWelcome'}); }else{ next(); }; }else{ //其他頁面正常進(jìn)入 next(); }; });//axios 請求攔截器 axios.interceptors.request.use(config => { let token = localStorage.getItem('token'); if (!!token) { // 判斷是否存在token，如果存在的話，則每個(gè)http header都加上token config.headers.Authorization = `token ${token}`; }; cancelPending(config); config.cancelToken = new cancelToken((c) => { pending.push({'u': config.url, 'f': c}); }); return config; }, err => { return Promise.reject(err); }); //響應(yīng)攔截器 axios.interceptors.response.use(response => { cancelPending(response.config); return response; }, error => { if (error.response) { switch (error.response.status) { case 401: // 返回 401 清除token信息并跳轉(zhuǎn)到登錄頁面 localStorage.removeItem('token'); router.push({'name': 'login', 'query': {'redirect': router.currentRoute.fullPath}}); } } return {data: {}}; // 返回接口返回的錯(cuò)誤信息（這里返回空對象是為了避免控制臺報(bào)錯(cuò)） });

總結(jié)

以上是生活随笔為你收集整理的vue项目中 axios请求拦截器与取消pending请求功能 - 年少、 - 博客园的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。