axios取消请求(axios如何取消请求)(1)

场景:小邹最近在使用axios时碰到一个问题,就是我想在特性条件时取消请求,以便减少不必要的前后接口交互。我们知道ajax取消请求的方式有两种:一种是通过设置时间,超时自动断开,另一种我们可以调用XMLHttpRequest对象上的abort方法。那我们在使用axios过程中该如何取消请求呢?小邹翻了一下官方的文档是这么说的:You can cancel a request using a cancel token.The axios cancel token API is based on the withdrawn cancelable promises proposal. You can create a cancel token using the CancelToken.source factory as shown below:

var CancelToken = axios.cancelToken; var source = CancelToken.source(); axios.get('/user/12345', { cancelToken: source.token }).catch(function(thrown) { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { // handle error } }); // cancel the request (the message parameter is optional) source.cancel('Operation canceled by the user.');

查找axios的文档,发现可以通过使用CancelToken来取消axios发起的请求,小邹就来写一个DEMO:

var app = new Vue({ el: '#app', data: { message: 'Hello Axios!', source: null }, methods: { sendRequest() { this.source = this.axios.CancelToken.source(); // 这里初始化source对象 this.axios.get(url, { cancelToken: this.source.token // 这里声明的cancelToken其实相当于是一个标记, // 当我们要取消请求的时候,可以通过这个找到该请求 }) .then(res => { // 你的逻辑 }) .catch(res => { // 如果调用了cancel方法,那么这里的res就是cancel传入的信息 // 你的逻辑 }) }, cancel() { this.source.cancel('这里你可以输出一些信息,可以在catch中拿到') } } })

使用非常的简单,希望对大伙有用!

,