Question

我正在使用Angular 5，我创建了以下拦截器：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  console.log('Creating HTTP request');
  this.session.loading = true;
  return next
    .handle(req)
    .map(res => {
      this.session.loading = false;
      console.log('Ending HTTP request');
      return res;
    })
    .catch(err => {
      this.session.loading = false;
      console.log('Ending HTTP request');
      return Observable.throw(err);
    });
}

这个拦截器非常简单，它应该在每个HTTP请求的页面上显示一个加载栏。

尽管如此，我还面临一个问题，我没有得到答案：当我发出HTTP请求时，会立即调用map。这意味着我的进度条永远不会出现。

我测试了一个长请求，返回500：当我删除地图功能时，进度条表现符合预期。但是当我放弃map时，它再也不起作用了。

观察者是否有操作员说仅在请求完成后才这样做？

Answer 1

您应该检查this guide拦截器：

你可以用这种方式实现你的拦截器：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.session.loading = true;
    return next
      .handle(req)
      .do(event => {
        if (event instanceof HttpResponse) {
          this.session.loading = false;
        }
      });
  }

Answer 2

由于您希望在observable停止发光时执行某些操作（因为它已成功完成，或者因为它已发出错误），您应该只使用print(data.__sizeof__())运算符。

拦截器＆amp; observables：仅在请求完成时执行某些操作

2 个答案: