使用HttpClient拦截器Angular 4的加载程序 [英] Loader Using HttpClient Interceptor Angular 4

问题描述

如何使用Angular 4 HttpClient拦截器实现加载程序？我已经完成登录并附加了授权标头，并且我想知道是否在此过程中正在加载某些数据时是否也可以执行加载器功能？我想附加一个图标加载器，用于指示是否正在加载某些数据。

How can i implement a loader using Angular 4 HttpClient Interceptor? I have done the login and attaching the authorization header and i wonder if i can also do the "loader function" if some data is loading in the process? I would like to attached a icon loader that signals if some data is loading. Here's my authinterceptor below by the way.

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

推荐答案

出于这个问题的考虑，我将不介绍如何创建加载器，而只是谈论如何将现有加载器实现到拦截器中。每次调用时，都会调用 intercept（）函数。这意味着，在 intercept（）函数的开始，您应该使用注入的 LoaderService whos工作显示加载器

Just for the sake of this question, I'm not going to go through creating a loader, and just talk about how you would implement an existing loader into the interceptor. Every time you make a call, the intercept() function is called. That means, at the beginning of the intercept() function, you should show a loader using an injected LoaderService whos job will be to show and hide a loader based on whether a call has been made and when it has been completed.

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 运算符来完成此操作。

Then, you have to make sure the loader is hidden after the call has been completed. You can do this with the do operator.

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

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

Make sure to import the do operator: import "rxjs/add/operator/do";

为什么要检查如果（HttpResponse的事件实例）？这是因为 HttpInterceptor 拦截了所有 HttpEvent s。其中包括 HttpSentEvent ， HttpProgressEvent 等，但是您不想在收到这些类型的信息时隐藏加载程序事件。仅在您实际收到回复后。而且，当然，如果收到错误，您将隐藏加载程序。您还可以在 do 块中放置收到响应后可能想要执行的任何其他处理。例如，将Auth令牌存储在某个地方。

Why do you have to check if (event instanceof HttpResponse)? This is because the HttpInterceptor intercepts ALL HttpEvents. This includes the HttpSentEvent, HttpProgressEvent, etc, but you don't want to hide the loader upon receiving those types of events. Only once you actually receive a response. And, of course, you will hide the loader if you receive an error. You can also put any other processes you may want to happen upon receive a response here in the do block. For example, storing an Auth token somewhere.

对于如何创建自己的加载程序，我发现了文章，其中介绍了创建和实现加载程序的步骤。您可以以此为指导来创建装载程序。您可以忽略使用自定义 HttpService 来实现它的部分，因为使用新的Angular HttpClient 并不需要它。 code>。

For how to create your own loader, I have found an article that goes through the steps of creating and implementing a loader. You can use this as a guide to creating a loader. You can just ignore the parts about implementing it with a custom HttpService because you won't need that since you're using the new Angular HttpClient.

这篇关于使用HttpClient拦截器Angular 4的加载程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！