标签：function axios 请求 source Axios cancel CancelToken

项目场景：

项目中遇到的场景，change 事件触发模糊匹配时，短时间内发送多个 ajax 请求，最后一次返回的数据可能不是最后一次触发 change 时的请求，导致获取数据不匹配

问题描述：

短时间内发送多个 ajax 请求，最后一次返回的数据可能不是最后一次触发 change 时的请求，导致获取数据不匹配

解决方案：

使用的 Axios 做数据请求，使用 cancel token 取消请求

官方案例  github.com/axios/axios

    // using the CancelToken.source factory 
    const CancelToken = axios.CancelToken 
    const source = CancelToken.source()
    
    // get
    axios.get('/user/1', {
        cancelToken: source.token
    }).catch(function (thrown) {
        if(axios.isCancel(thrown)) {
            console.log('Request canceled', thrown.message)
        } else {
            // handle error
        }
    })
    
    // post
    axios.post('/user/1', {
        name: ''
    }, {
        cancelToken: source.token
    })
    
    // cancel request 参数可选
    source.cancel('取消上次请求')

    // use executor function
    const CancelToken = axios.CancelToken
    let cancel
    
    // get
    axios.get('/user/1', {
        cancelToken: new CancelToken(function executor(c) {
            // executor 函数接收一个 cancel 函数作为参数
            cancel = c
        })
    })
    
    // post
    axios.post('/user/1', {
        name: ''
    }, {
        cancelToken: new CancelToken(function executor(c) {
            cancel = c
        })
    })
    
    // cancel request
    cancel()

我的 Vue 项目实例

    import axios from 'axios'
    let cancel
    let CancelToken
    
    mounted() {
        CancelToken = axios.CancelToken
    }
    
    // 多次触发fetchList请求 取消上次请求，触发最新请求
    async fetchList() {
        if(cancel) {
            cancel()
        }
        await axios.post('/user/list', {
            query: ''
        }, {
            cancelToken: new CancelToken(function executor(c) {
                cancel = c
            })
        })
    }

标签：function,axios,请求,source,Axios,cancel,CancelToken
来源： https://blog.csdn.net/weixin_43340372/article/details/123094047

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。