使用按钮取消传入请求答案

【问题标题】：Canceling the incoming request with a button使用按钮取消传入请求
【发布时间】：2021-12-29 02:20:52
【问题描述】：

当我切换到菜单时，我从 API 获取数据。当此数据仍在 DevTools 中键入 pendig 时，我单击过滤器按钮并搜索其他数据。我正在寻找的数据出现在我的桌子上。但是当待处理的数据到来时，我搜索的数据就消失了。

获取数据的命令行

  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”的请求。

【问题讨论】：

这是哪个角度版本？
如果您使用 Angular，我建议使用 http Observable 进行 API 调用。当另一个请求正在进行时，取消请求会很容易。您可以使用 switchMap 运算符或自定义逻辑来取消请求。
Angular 版本是 7.1.0 @zainhassan
我会调查 switchMap 运算符，谢谢。 Observable 在很多 API 中都有使用，但是当我现在工作时，它是不可用的。这就是我遇到麻烦的原因。 @RiteshWaghela

标签： angular ajax typescript request devtools

【解决方案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();
    }
}

【讨论】：

使用此按钮后我应该为按钮分配什么以取消请求？
我已经更新了代码。当您调用 loadData 函数时，它应该可以工作