见代码
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