axios取消请求

axios发送请求时，添加cancelToken配置项可以用于取消请求，cancelToken的取值有两种方式

1.使用 CancelToken.source 工厂方法创建cancel token

CancelToken有一个source静态方法，调用之后返回一个对象，该对象包含一个token属性用于标记请求和一个cancel方法用于取消请求

    const CancelToken = axios.CancelToken;const source = CancelToken.source();axios.get('http://localhost:6003/axios/4',{cancelToken: source.token}).then(function(res) {console.log(res.data);})source.cancel('不想请求了');

2.通过传递一个 executor 函数到 CancelToken 的构造函数创建cancel token

axios有一个CancelToken属性，他是一个类，用于获取取消请求的cancel方法，获取了该方法之后就可以在合适的地方执行cancel()取消请求了。这种方式比较麻烦，但是可以用于取消多个请求，你可以将c这个取消请求的方法push进一个数组，然后在你需要取消多个请求的时候，循环这个数组，依次执行里面的方法即可取消多个请求。

    let arr = [];const CancelToken = axios.CancelToken;axios.get('http://localhost:6003/axios/4',{cancelToken: new CancelToken(function executor(c){arr.push(c);//cancel = c;})}).then(function(res) {console.log(res.data);})axios.get('http://localhost:3000/axios/3',{cancelToken: new CancelToken(function executor(c){arr.push(c);//cancel = c;})}).then(function(res) {console.log(res.data);})for (let i = 0; i < arr.length; i++) {arr[i]('请求取消');}

注意点1：
cancel取消请求方法在调用取消请求的时候可以将取消原因——message字符串传递进去，这样请求在被取消之后会被catch捕获，你可以在这里将取消原因打印出来或者提示给用户，比如提示用户不要频繁点击发送请求

    const CancelToken = axios.CancelToken;const source = CancelToken.source();axios.get('http://localhost:6003/axios/4',{cancelToken: source.token}).then(function(res) {console.log(res.data);}).catch(function(err) {if (axios.isCancel(err)) {console.log(err.message);}})source.cancel('不想请求了');

注意点2：
get的cancelToken放置在第二个参数的对象里面，post的cancelToken放置在第三个参数对象里面

    const CancelToken = axios.CancelToken;const source = CancelToken.source();axios.post('http://localhost:6003/axios',{username: 'lisi',content: 123},{headers:{"Content-Type": "application/json"},cancelToken: source.token}).then(function(ret){console.log(ret.data);})source.cancel('不想请求了');

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！