axios请求同一接口多次，取消上一次请求

说明：

       常用在点击请求事件，点击多次发送多个相同请求。还有接口数据量大时，返回数据慢，切换筛选条件后返回新的数据，但当上一个筛选条件的数据返回时会覆盖这个新的数据，造成bug。（我遇到的就是这个问题，以此记录）

解决方法

axios文档官网：http://www.axios-js.com/docs/  

github axios官网：https://github.com/axios/axios

利用axios的属性cancelToken来取消当前发送的请求：

        let cancel = null;  
        //也可以存在window下，全局调用  window.cancel = null ；


        //取消请求
        const CancelToken = new axios.CancelToken(function executor(c) {
            cancel = c
            //window.cancel = c
        })
        
        //getList是对axios的二次封装了，内容放在下面
        CensusTs.getList(searchData, CancelToken).then(res => {
            if (res.data.code === 200) {
                const data = res.data.data
                this.setState({
                    page,
                    data: data.list,
                    total: data.total,
                    loading: false
                })
            }
        })

        //getList
        static getList(params, cancelToken) {
            return axios.get('接口地址', { params, cancelToken })
        }


        //在修改年份条件的时候重新请求，取消上一次请求
        onYearChanged = (year) => {
                if (year) {
                    cancel && cancel()
                    this.setState({
                        year: year,
                        loading: true
                     }, this.getData)
                 }

        }

还有一种写法 ,效果是一样的，但使用这种方法时，source.canel()取消后再将source值为null，不然请求只会执行了一次，取消后就不会再执行了，完整代码如下:

    import axios from "axios";
    //可以使用 CancelToken.source
    const CancelToken = axios.CancelToken;
    let source = null;
    
    getData =()=>{
        source = CancelToken.source();
        CensusTs.getList(searchData, source ).then(res => {
            if (res.data.code === 200) {
                const data = res.data.data
                this.setState({
                    page,
                    data: data.list,
                    total: data.total,
                    loading: false
                })
            }
        })
    }
    
    //同样在修改年份条件的时候重新请求，取消上一次请求
    onYearChanged = (year) => {
         if (year) {
               source.cancel("请求已取消")
               source = null
               this.setState({
                  year: year,
                  loading: true
                  }, this.getData)
                 }

        }

（记录学习）