项目场景：

项目中遇到的场景，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