使用按钮取消传入请求

Question

当我切换到菜单时，我从 API 获取数据。虽然此数据仍在 DevTools 中输入 pendig，但我单击 Filter 按钮并搜索其他数据。我正在寻找的数据来自我的 table。但是当pending data来的时候，我搜索的数据就消失了

获取数据的命令行

  protected loadData = (params) => {
    $.ajax({
        method: 'GET',
        url: this.tableUrl,
        data: params.data,
        beforeSend: (request) => {
            request.setRequestHeader('Authorization', `Bearer ${this.authService.getToken()}`);
        }
    }).done((response) => {
        params.success(response);
    });
}

我在上面收到的请求。最高请求大约需要 40 秒。底部需要1秒。它在 1 秒内获取数据。由于另一个需要 40 秒，因此其他数据将添加到 39 秒后 1 秒的数据之上。我需要在过滤时取消显示“referenceTumList?PageIndex=0&PageSize=10”的请求。

Answer 1

您可以这样取消ajax通话

xhrReq: any;

protected loadData = (params) => {

if(this.xhrReq){
    this.xhrReq.abort();
}

this.xhrReq = $.ajax({
    method: 'GET',
    url: this.tableUrl,
    data: params.data,
    beforeSend: (request) => {
        request.setRequestHeader('Authorization', `Bearer ${this.authService.getToken()}`);
    }
}).done((response) => {
    params.success(response);
});
}

如果你想取消点击按钮的调用

onButtonClick(){
    if(this.xhrReq){
        this.xhrReq.abort();
    }
}

使用按钮取消传入请求

Canceling the incoming request with a button

angular

ajax

typescript

request

devtools