Angular 角度：如何在慢速HTTP响应上显示内容

在我的angular应用程序中，我想显示一个文本/模式，当服务器响应缓慢时，该文本/模式有一个取消和重新加载按钮

如果用户单击“取消”，当前http请求将被取消。如果用户单击“重新加载”，将重试当前http请求。如果文本/模式已经显示，并且HTTP请求已经响应/完成，那么文本/模式应该消失

我有一个使用HTTP拦截器、RxJS和全局服务的想法，但是实现它并不是那么容易

有没有人有想法，如何以正确的方式做到这一点

---

编辑：哦，我想让它成为一个通用模块，这样每个http请求都可以取消或重新加载。因此，每个页面都可以具有此功能

假设您的请求需要20秒才能完成响应，那么您可以在20秒内取消该请求

只需

取消订阅

该请求

import { Component, OnInit, OnDestroy } from '@angular/core';
    import { Subscription } from 'rxjs/Rx';

    export class Component implements OnInit, OnDestroy {
        private subscription: Subscription;
        ngOnInit() {
            this.subscription = this.route.params.subscribe();
        }
        ngOnDestroy() {
            this.subscription.unsubscribe();
        }



     cancel() {
            this.subscription.unsubscribe();
        }

    retry() {
            this.subscription.subscribe();
        }



    }

html 当您发出任何http请求时，您可以在任何位置或任何时间弹出一个按钮，以便能够取消它

     <div> {{ subscription | async }}</div>
.
.
.Enter your other logic
.


    <button (click)=="cancel()" > Cancel Request</button>
    <button (click)=="retry()" > Cancel retry</button>

{{订阅|异步}
.
.
.输入其他逻辑
.
取消请求
取消重试

您需要使用HttpRequest。这里有一个如何做的解释。但请记住，它会监听每一个变化检测，从而大大降低应用程序的性能。建议用于大量请求（即文件上载）

使用

takeUntil取消/中止所有挂起的HTTP请求
您可以使用
takeUntil
来停止正在进行的请求，因为来自
HttpClient
的请求会返回一个可观察到的值，您可以很容易地执行此操作：

TS
您还可以签出以下内容：

有关更多信息：

创建可取消订阅
那个很简单。在组件中创建一个属性，如下所示：

dataSubscription:Subscription

在触发请求的事件处理程序中，按如下方式创建请求：

dataSubscription=someService.someRESTApiCalls.subscribe（..）

任何时候，你想阻止这一切，你可以打电话

this.dataSubscription.unsubscribe（）

我还建议使用
ngondestory
hook，并在需要时取消订阅：

ngOnDestroy(){

   if(this.dataSubscription) this.dataSubscription.unsubscribe();
}

取消电话

情态动词
对于情态动词，我推荐

逻辑
在组件
isResponseArrived:boolean
或其他内容中创建类属性。用户启动请求后，在事件处理程序中将其设置为false，并使用
ngIf=“！isResponseArrived”
˛在响应到达后，将订阅响应处理程序中的标志值修改为true（带值或出错）

+1:检测订阅时间是否过长

使用httpClient超时（）：

你能对你迄今为止所做的尝试发起一场闪电战吗？对不起，不行。我还在尝试一些想法。我目前所做的是使用一个具有onCancel和onReload可观测值的服务。从拦截器中尝试订阅这些可观察到的内容。我需要其他人的意见如何检测订阅时间是否超过x秒？？当我知道响应需要很长时间后，我可以取消或重新加载它。超时不会自动出错/完成流吗？有没有办法不完成这个流程？让客户端仍在等待响应，但同时，用户收到通知，当前http需要很长时间，可以取消或重做。不过，我不想只是取消订阅/取消。我想让用户在一段时间后选择取消或重试time@same创建重试方法的方法我已经有了类似的代码。但是，对于每个http请求，有没有办法计算它获得响应所需的时间，然后向用户显示取消或重做请求可观察流的选项。取消请求显然会完成可观察流。对于那些用户，您可以使用
主题
不断推送新请求，但由于抛出错误，获得
404或超时将始终完成可观察的请求。如果发生错误，您需要设置一个回退值。除此之外，您的描述看起来有点不清楚您真正想要什么。使用TakeTill应该可以实现您想要的：用户可以重试请求并取消它。
this.apiService.makeRequest().pipe(
    //retry 2 times on error
    retry(2)
).subscribe(...);

ngOnDestroy(){

   if(this.dataSubscription) this.dataSubscription.unsubscribe();
}

this.httpClient.get(url, { headers: headers })
        .timeout(30000)
        .subscribe(
            (response) => {
                ...
            },
            error => {
                ...
            }
                ...
            );