angular - Angular：如何在缓慢的 HTTP 响应中显示某些内容

Question

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

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

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

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

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

标签： angularrxjsrxjs6angular-http-interceptors

Answer 1

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，并显示任何您想要 shuw 的内容，并带有 ˛ngIf="!isResponseArrived"响应到达后，在订阅响应处理程序中将 flags 值修改为 true（无论是带有值，还是打开错误）。

+1：检测订阅是否花费太长时间

使用 httpClient 超时（source）：

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