当前位置: 移动技术网 > 移动技术>移动开发>IOS > Axios发送请求时cancelToken的取值使用

Axios发送请求时cancelToken的取值使用

2020年10月12日  | 移动技术网移动技术  | 我要评论
参考axios官网官网的有点难理解,自己看官方文档也搞了好久才明白,以下是我的总结。axios发送请求时,添加cancelToken配置项可以用于取消请求,cancelToken的取值有两种方式axios有一个CancelToken属性,他是一个类,用于获取取消请求的cancel方法,获取了该方法之后就可以在合适的地方执行cancel()取消请求了。


官网的有点难理解,自己看官方文档也搞了好久才明白,以下是我的总结。

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

  1. axios有一个CancelToken属性,他是一个类,用于获取取消请求的cancel方法,获取了该方法之后就可以在合适的地方执行cancel()取消请求了。这种方式比较麻烦,但是可以用于取消多个请求,你可以将c这个取消请求的方法push进一个数组,然后在你需要取消多个请求的时候,循环这个数组,依次执行里面的方法即可取消多个请求。
const CancelToken = axios.CancelToken; let cancel; axios.get('/user', { cancelToken: new CancelToken(function executor(c) { // executor 函数接收一个 cancel 函数作为参数 cancel = c; }) }); cancel(); 
  1. CancelToken有一个source静态方法,调用之后返回一个对象,该对象包含一个token属性,用于标记请求和一个cancel方法,用于取消请求。
const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.get('/user', { cancelToken: source.token }) source.cancel(); 
  1. cancel取消请求方法在调用取消请求的时候可以将取消原因——message字符串传递进去,这样请求在被取消之后会被catch捕获,你可以在这里将取消原因打印出来或者提示给用户,比如提示用户不要频繁点击发送请求。
const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.get('/user/12345', { cancelToken: source.token }).catch(err => { // 这里主要是判断这个错误是取消请求导致的还是其他原因导致的 if (axios.isCancel(thrown)) { console.log(err.message); } }); // 取消请求(message 参数是可选的) source.cancel('不要再点啦'); 
  1. 其他还要注意get的cancelToken放置在第二个参数的对象里面,post的cancelToken放置在第三个参数对象里面。
axios.get('/user', { cancelToken: source.token }) axios.post('/user', { name: 'new name' }, { cancelToken: source.token }) 

本文地址:https://blog.csdn.net/RkHker/article/details/109024561

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网