需求:从A页面跳转至B页面时,要取消A页面的axios请求;有时候,我们可能需要在发送请求后取消它,比如用户在请求还未完成时离开了当前页面或者执行了其他操作,本文将介绍如何在使用 Axios 发送请求时取消这些请求。
Axios 提供了 CancelToken 类来创建取消标记。该类中有个source()方法。取消标记实际上是一个包含 cancel
方法的对象。代码如下;
javascript
import axios from 'axios';
// 创建取消标记
const source = axios.CancelToken.source();
// 发送请求并关联取消标记
axios.get('/api/data', {
cancelToken: source.token
});
然后,在Vue Router的导航守卫中,监听路由变化,在离开页面时取消之前的请求:
javascript
import axios from 'axios';
router.beforeEach((to, from, next) => {
source.cancel('路由跳转,取消请求');
next();
});
也可以在vue组件的beforeDestory()钩子中或者destory()去取消请求:
javascript
destroyed () {
//window.removeEventListener('resize', this.screenAdapter)
//this.$socket.unRegisterCallBack('hotData')
// 取消请求
source.cancel('请求取消的原因');
},
综上所述:主要是利用axios 所提供的cancelToken.source()去创建取消标记即
const source = axios.CancelToken.source();
然后在发送请求时去关联标记,即cancelToken: source.token;
最后在合适的时机用source.cancel()去取消请求