Angular 2 - 在 POST 之前取消 HttpInterceptor 中的挂起 GET 请求答案

【问题标题】：Angular 2 - Cancel pending GET request in HttpInterceptor before POSTAngular 2 - 在 POST 之前取消 HttpInterceptor 中的挂起 GET 请求
【发布时间】：2017-11-04 02:27:58
【问题描述】：

定期轮询我的 API 的 GET 请求。如果我在 GET 请求挂起时发出 POST 请求，并且该 POST 返回新数据，则来自 GET 请求的数据将过期。

使用HttpInterceptor 可以在发送 POST 之前取消所有待处理的 GET 请求吗？

有人告诉我，我不能将req 传递给next.handle()，但那我应该传递什么req？

【问题讨论】：

标签： angular angular-http-interceptors

【解决方案1】：

如果我们谈论 Angular 2，您可能会通过以下方式调用您的 API：

this.http.get('url').map(res => { ... }).catch(error => { ... });

它返回 Observable，一旦你订阅它，它就会返回一个订阅。一旦您取消订阅 - 它将取消您的请求。查看完整示例：

service.ts

getData(): Observable<any> {
    return this.http.get('url').map(res => { ... }).catch(error => { ... });
}

component.ts

requestSubscription: Subscription;

ngOnInit() {
   this.requestSubscription = this.service.getData().subscribe(data => { ... });
}

someFuncWhereYouHandlePOSTSuccess() {
   if (this.requestSubscription) {
      this.requestSubscription.unsubscribe();
   }
}

希望这个概念足够清楚。如果没有 - 我已经准备好回答你的问题了。

编辑

由于 OP 引导我走上正确的道路，我认为我的解决方案属于他的建议作为正确答案。

解决方案服务.ts

private breakPolling: boolean = false;

constructor(private httpClient: HttpClient) {
}

getData() {
    return this.httpClient
        .get(this.url)
        .map((response) => {
            if (this.breakPolling) {
                this.breakPolling = false;
                return Observable.empty();
            } else {
                return response;
            }
        });
}

breakPolling() {
    this.breakPolling = true;
    return Observable.empty();
}

我调度了一个动作，它将调用breakPolling() 方法并设置一个简单的布尔值。我没有将响应数据作为 observable 返回，而是返回一个空的 Observable。

它不会取消请求，但会阻止其数据被传递。它很丑，但它会修补。

【讨论】：

这实际上很有意义。我正在使用ngrx，但我认为我将其与一个简单的调度动作联系在一起。我明天试试。谢谢
是的。我对 ngrx 有一些经验，如果您在 POST 成功时发送新操作，您可以将此取消订阅绑定到此操作类型的 @Effect。
既然您熟悉ngrx，我如何才能订阅服务请求，但仍将订阅结果作为可观察对象返回到我的@Effect？
嗯.. 我明白你在说什么。您可能可以将此订阅存储在共享服务中，但也许您可以以不同的方式执行此操作。选择最适合您当前架构的。