如何使用Axios AbortController中止此前发起的请求

问题描述 #

参考Axios官方取消请求相关说明使用AbortController()中止此前发起的所有Axios请求时，历史查询请求并未被中止，仍会在前端被完整解析处理。

问题背景 #

开发的应用搜索功能本身运行符合预期，但用户频繁点击切换筛选条件时，所有历史请求都会在后台完整执行。需求为用户修改查询条件时，能够直接中止所有之前发起的请求，确认Axios的AbortController是否可用于实现该场景。

问题解决（已验证生效） #

经调整后功能已正常运行，感谢@Oluwafemi的帮助，一共需要修正两处核心配置：

• 执行abort()操作后，必须立即重新实例化一个新的AbortController()
• AxiosSearchController的signal需要作为Axios请求方法的第三个参数传入，绝对不能放在请求payload中（该点和网上部分资料描述存在差异）

补充优化：实际使用中可以给查询函数额外包裹防抖器，配合AbortController就能实现效果稳定的多层级API通信管理，避免频繁触发请求带来的资源浪费、返回数据顺序错乱问题。

可运行参考代码 #

（已删减大量无关方法和代码行）

export default class MySearch {

    constructor() {
        // 初始化配置
        this.payload = null

        this.active = {
            q: "", // 查询字符串 例: "apples"
            facets: {}, // 筛选项对象，每个属性对应选项数组 例: { 'size': [ '2 x 2 in', '3 x 3 in' ]}, { 'artists': [ 'mike', 'john', 'jane' ] }
            page: null, // 页码 例: 3
            sortBy: null // 排序规则，可选值: "default" | "newest" | "price_asc" | "price_desc"
        }

        // 初始化AbortController实例
        this.AxiosSearchController = new AbortController()
    }


    async query() {

        return new Promise( async (resolve, reject) => {

            // 中止上一次未完成的Axios请求
            this.AxiosSearchController.abort()

            // 重新实例化新的AbortController供本次请求使用
            this.AxiosSearchController = new AbortController()

            this.transformURL()

            let requestParams = {
                "page": this.active.page, 
                "sortBy": this.active.sortBy,
                "filter": this.active.facets,
            }

            // 绑定本次请求对应的controller signal
            let AxiosSignal = {
                "signal": this.AxiosSearchController.signal
            }

            axios.post('/api/search/' + this.active.q, requestParams, AxiosSignal)
            .then( response => {    
                this.payload = response.data    
                return resolve(response)
            })
            .catch( error => {
                console.error(error)
                return reject(error)
            })

        })
    }

}

内容的提问来源于stack exchange，提问作者Kalnode