ajax 有终止请求 abort 那 axios 有没有,怎么实现


见代码

class View extends Component { constructor(props){ super(props); this.state = { cancel:null, cancel2:null } } //简易版 async getApi2(url,cfg,headers){ let data = await axios.get(url,{params:cfg}, { headers: headers }) return data; } // 增加取消版 async getApi2(url,cfg,headers,fn){ const CancelToken = await axios.CancelToken; let data = await axios.get(url,{ params:cfg, cancelToken: new CancelToken(function executor(c) { //取消请求官方提供了方法就是在new一个CancelToken函数的参数,我们主要实现的就是想让 这个参数(函数)c 被外部使用 //所以使用了 第四个参数 函数 使用参数进行返回 fn(c) }) }, { headers: headers }) return data; } componentDidMount(){ //如下代码在调用时增加了第四个参数 ,在四个参数中进行重新赋值使用 this.getApi2('/home/mediareports',{ 'page_number':1, 'page_size':5 },{},(c)=>{ 把参数(函数)c给到state cancel this.state.cancel = c }).then((res)=>{ console.log(res.data.data) }) //以下就可以使用取消终止请求了 // setTimeout( ()=>{ // this.state.cancel() // }, 100) this.getApi3('/home/mediareports',{ 'page_number':1, 'page_size':5 },{},(c)=>{ this.state.cancel2 = c }).then((res)=>{ console.log(res.data.data) }) setTimeout( ()=>{ this.state.cancel2.cancel('请求已取消') }, 100) } async getApi3(url,cfg,headers,fn){ const CancelToken = await axios.CancelToken; const source = await CancelToken.source(); await fn(source) let data = await axios.get(url,{ params:cfg, cancelToken: source.token }, { headers: headers }) return data; } componentWillUnmount(){ //取消/home/mediareports这个接口的请求 this.state.cancel() this.state.cancel2.cancel('请求已取消') } render(){ return( <div>111</div> ) } }


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM