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

如何使用Angular 4 HttpClient拦截器实现加载程序？我已经完成了登录和附加授权头，我想知道如果在过程中加载了一些数据，我是否也可以执行“加载程序功能”？我想附上一个图标加载器，信号，如果一些数据正在加载。顺便说一下，下面是我的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);
  }
}

导出类GithBuuthInterceptor实现HttpInterceptor{
截取（req:HttpRequest，next:HttpHandler）：可观察{
const authReq=req.clone({
headers:req.headers.set（'Authorization'，'token'）
});
返回next.handle（authReq）；
}
}

就为了这个问题，我不打算介绍如何创建一个加载器，而只讨论如何将现有的加载器实现到拦截器中。每次调用时，都会调用

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

操作符：

import“rxjs/add/operator/do”

为什么必须检查
if（HttpResponse的事件实例）
？这是因为
HttpInterceptor
拦截所有
HttpEvent
s。这包括
HttpSentEvent
、
HttpProgressEvent
等，但您不希望在收到这些类型的事件时隐藏加载程序。只有一次你真正收到回复。当然，如果收到错误，您将隐藏加载程序。您还可以在
do
块中放置接收到响应后可能需要执行的任何其他进程。例如，将身份验证令牌存储在某处

关于如何创建自己的加载器，我找到了一个可以通过创建和实现加载器的步骤来实现的方法。您可以将此作为创建加载程序的指南。您可以忽略有关使用自定义
HttpService实现它的部分，因为您不需要它，因为您正在使用新的Angular
HttpClient
，这可以通过多种方式实现。你已经创建了一个加载器了吗？我们到底在用什么？你只展示了拦截器这一事实让我认为你已经准备好了装载机？@JunKang。还没有
return next.handle(authReq)
  .do(
  (response) => {
    if (response instanceof HttpResponse) {
      this.loaderService.hide();
    }
  },
  (error) => {
    this.loaderService.hide();
  });