点击筛选按钮时取消待处理AJAX请求 避免旧数据覆盖新搜索结果

问题本质 #

多个同接口异步请求的返回顺序和发起顺序不一致，晚发起的筛选请求先返回完成表格渲染后，早发起的旧请求仍处于 pending 状态，等旧请求返回后就会覆盖当前表格的正确数据。

实现方案 #

通过主动取消未完成的旧请求即可解决，具体修改如下：

1. 在你的类中新增属性，用于存储当前待处理的 AJAX 请求实例

private pendingAjaxRequest: JQuery.jqXHR | null = null;

2. 修改 loadData 方法，每次发起新请求前先终止之前未完成的请求

protected loadData = (params) => {
    // 发起新请求前，先终止之前未完成的请求
    if (this.pendingAjaxRequest) {
        // 如需仅取消指定路径的请求，打开下方判断即可
        // if (this.pendingAjaxRequest.url.includes('referenceTumList?PageIndex=0&PageSize=10')) {
            this.pendingAjaxRequest.abort();
        // }
    }

    this.pendingAjaxRequest = $.ajax({
        method: 'GET',
        url: this.tableUrl,
        data: params.data,
        beforeSend: (request) => {
            request.setRequestHeader('Authorization', `Bearer ${this.authService.getToken()}`);
        }
    }).done((response) => {
        params.success(response);
    }).always(() => {
        // 无论请求成功/失败/被取消，完成后清空存储的实例
        this.pendingAjaxRequest = null;
    });
}

说明 #

• abort 方法会直接终止处于 pending 状态的请求，被终止的请求不会触发 done 回调，不会执行旧数据的渲染逻辑
• 代码中已经预留了指定路径请求的判断逻辑，按需打开即可适配你的需求
• always 回调保证请求结束后自动清空存储的实例，避免内存残留问题

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