使用 HttpClient 拦截器的加载器 Angular 4

Question

如何使用 Angular 4 HttpClient 拦截器实现加载程序？我已经完成登录并附加授权 header，我想知道如果某些数据正在加载过程中，我是否也可以执行 "loader function"？我想附上一个图标加载器，它会在加载某些数据时发出信号。顺便说一句，下面是我的 authinterceptor。

export class GithubAuthInterceptor implements HttpInterceptor {
  intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authReq = req.clone({
      headers: req.headers.set('Authorization', 'token')
    });
    return next.handle(authReq);
  }
}

Answer 1

为了这个问题，我不准备创建一个加载器，只讨论如何将现有的加载器实现到拦截器中。每次调用时，都会调用 intercept() 函数。这意味着，在 intercept() 函数的开头，您应该使用注入的 LoaderService 显示加载器，其工作是根据是否已进行调用以及何时进行调用来显示和隐藏加载器已完成。

constructor(private loaderService: LoaderService) {
}

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  this.loaderService.show();
  const authReq = req.clone({
    headers: req.headers.set('Authorization', 'token')
  });
  return next.handle(authReq);
}

然后，你必须确保加载器在调用完成后隐藏。您可以使用 do 运算符执行此操作。

return next.handle(authReq)
  .do(
  (response) => {
    if (response instanceof HttpResponse) {
      this.loaderService.hide();
    }
  },
  (error) => {
    this.loaderService.hide();
  });

确保导入 do 运算符：import "rxjs/add/operator/do";

为什么要检查if (event instanceof HttpResponse)？这是因为 HttpInterceptor 拦截了所有 HttpEvent。这包括 HttpSentEvent、HttpProgressEvent 等，但您不想在收到这些类型的事件时隐藏加载程序。只有当你真正收到回复时。当然，如果您收到错误，您将隐藏加载程序。您还可以在 do 块中放置您可能希望在此处收到响应时发生的任何其他进程。例如，将 Auth 令牌存储在某处。

关于如何创建自己的加载器，我找到了一个 article，其中介绍了创建和实现加载器的步骤。您可以将其用作创建加载程序的指南。您可以忽略有关使用自定义 HttpService 实现它的部分，因为您不需要它，因为您使用的是新的 Angular HttpClient.

使用 HttpClient 拦截器的加载器 Angular 4

Loader Using HttpClient Interceptor Angular 4

angular-http-interceptors

angular

angular4-httpclient