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

Question

我如何使用 Angular 4 HttpClient 拦截器实现加载器？我已经完成登录并附加了授权 header ，我想知道如果某些数据正在加载过程中，我是否也可以执行“加载程序功能”？我想附上一个图标加载器，它会在加载某些数据时发出信号。顺便说一句，下面是我的 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() 函数的开头，您应该使用注入(inject)的 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 block 中放置您可能希望在此处收到响应时发生的任何其他进程。例如，将 Auth token 存储在某处。

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