见代码

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>
        )
    }
}