Angular：如何在HTTP响应缓慢时显示某些内容

Question

在我的角度应用程序中，当服务器响应缓慢时，我想显示具有cancel和reload按钮的文本/模式。

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

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

有谁有主意，如何以正确的方式做到这一点？

Answer 1

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

简单地UnSubscription该请求

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();
        }


    }

html您可以在发出任何http请求时在任何时候弹出一个按钮，或在任何地方按下该按钮，以便将其取消

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

Answer 2

您需要使用HttpRequest的reportProgress。 https://stackoverflow.com/a/47034525/9590251这里有一个说明。但是请记住，它将监听所有更改检测，从而大大降低了应用程序的性能。建议用于繁重的请求（即文件上传）

Answer 3

您可以使用takeUntil停止正在进行的请求。由于HttpClient的请求返回了一个可观察到的内容，因此您可以轻松完成此操作：

TS

userStop$ = false;

makeRequest() {
    // Service Call
    this.apiService.makeRequest().pipe(
        takeUntil(this.userStop$)
    ).subscribe(...);
}

例如，通过单击将userStop$更改为true时，它将停止。要重试，您只需调用服务方法并将userStop$设置为false；

您也可以结帐：How to cancel/unsubscribe all pending HTTP requests angular 4+

有关更多信息：https://www.learnrxjs.io/operators/filtering/takeuntil.html

Answer 4

1. 创建可取消的订阅

那很容易。在组件中创建一个属性，如下所示：

dataSubscription: Subscription

并在触发请求的事件处理程序中，按如下所示创建它：

dataSubscription = someService.someRESTApiCalls.subscribe(....)

任何时候，您想停止此操作，都可以致电

this.dataSubscription.unsubscribe()

我也建议使用ngOnDestroy钩子，并在需要时取消订阅：

ngOnDestroy(){

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

取消通话。

2. 模式

对于模态，我推荐Angular Material Modal

3. 逻辑

在组件isResponseArrived: boolean中创建类属性或其他内容。用户启动请求后，在事件处理程序中将其设置为false，并使用ngIf="!isResponseArrived"˛显示您想要关闭的内容。响应到达后，在订阅响应处理程序中将标志值修改为true（都与value ，或出现错误）。