Question

我已经实现了HttpInterceptor接口，以拦截传出请求和传入响应。

我想在创建请求时显示加载程序，并在收到响应时隐藏该加载程序。

虽然检测到HttpResponse时代码如下，但是它没有检测到Http Failure（当响应代码不同于200时），因此加载器不会被隐藏。

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private loaderService: LoaderService) { }

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    this.loaderService.show();

    return next
        .handle(req)
        .do(event => {
            //nothing is printed when a Http failure occurs
            console.log('detecting event ', event);
            if (event instanceof HttpResponse) {
                console.log('detecting http response');
                this.loaderService.hide();
            }
        });
  }
}

Answer 1

我建议的只是添加一个finally运算符，它可以在成功和错误情况下完成工作：

import 'rxjs/add/operator/finally';

// ...

.finally(()=> this.loaderService.hide())

Answer 2

尝试使用catch将错误处理添加到Observable：

.catch((error: any) => {
        if (error instanceof HttpErrorResponse) {
          this.loaderService.hide();
          // show the error to the user here
        } else {
          return Observable.throw(error);
        }
 })

Answer 3

.do方法创建的Observable为源发出的每个值，错误和完成执行副作用。实际上它会窥探原始的Observable并在发现某些事件时触发这些副作用。

请参阅文档here。

您可以通过为错误添加处理程序来执行您已经为示例中的值执行的操作：

return next
    .handle(req)
    .do(event => {
        //nothing is printed when a Http failure occurs
        console.log('detecting event ', event);
        if (event instanceof HttpResponse) {
            console.log('detecting http response');
            this.loaderService.hide();
        }
    }, (err: any) => {
        console.log('... error occurred');
        this.loaderService.hide();
    });

还有完成副作用，可能在这种情况下使用。

Angular 4 HttpInterceptor：显示和隐藏加载器

3 个答案: