Vue框架中，我們通常使用AJAX來獲取后端數據并更新前端頁面。在使用AJAX時，我們經常需要發送請求并等待響應，但有時候我們需要取消或回退請求，例如用戶取消了當前請求，或者用戶已經離開了當前頁面，而瀏覽器還在持續發送AJAX請求。讓我們來看看如何在Vue框架中取消或回退AJAX請求。

1. 使用axios取消AJAX請求

const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('取消請求：', thrown.message);
} else {
// 處理錯誤
}
});
// 取消請求
source.cancel('取消請求');

2. 在路由組件中取消AJAX請求

export default {
data() {
return {
loading: null
}
},
created() {
this.loading = axios.get('/api/data')
.then(res =>this.parseData(res.data))
.catch(err =>{
if (err && err.message === '路由跳轉取消請求') return;
// 處理錯誤
});
},
beforeRouteLeave(to, from, next) {
this.loading.cancel('路由跳轉取消請求');
next();
}
}

3. 在Vue組件中取消AJAX請求

export default {
data() {
return {
loading: null
}
},
created() {
this.loading = axios.get('/api/data')
.then(res =>this.parseData(res.data))
.catch(err =>{
if (err && err.message === '組件卸載取消請求') return;
// 處理錯誤
});
},
beforeDestroy() {
this.loading.cancel('組件卸載取消請求');
}
}

除此之外，我們還可以使用Vue的mixin功能，將取消AJAX請求的代碼封裝到一個mixin中，在需要使用的組件中混入該mixin即可。