4

如何使用 Angular 4 HttpClient 拦截器实现加载器？我已经完成了登录并附加了授权标头，我想知道如果某些数据正在加载过程中，我是否也可以执行“加载器功能”？我想附加一个图标加载器，如果某些数据正在加载，它会发出信号。顺便说一下，这是我的身份验证器。

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);
  }
}
4

1 回答 1

5

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

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拦截 ALL HttpEvent。这包括HttpSentEvent,HttpProgressEvent等，但您不想在接收到这些类型的事件时隐藏加载程序。只有当您真正收到回复时。当然，如果您收到错误，您将隐藏加载程序。您还可以将在收到响应时可能希望发生的任何其他过程放在do块中。例如，将 Auth 令牌存储在某处。

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

于 2017-10-03T23:31:24.603 回答