Question

如何使用Angular 4 HttpClient Interceptor实现加载器？我已经完成了登录并附加了授权标题，我想知道我是否也可以执行＆＃34;加载器功能＆＃34;如果在流程中加载了一些数据？我想附加一个图标加载器，用于指示是否正在加载某些数据。顺便说一下，这是我的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 s。这包括HttpSentEvent，HttpProgressEvent等，但您不希望在收到这些类型的事件时隐藏加载程序。只有在您实际收到回复后。当然，如果收到错误，您将隐藏加载程序。您还可以在do块中收到响应后，将您可能想要的任何其他流程放入其中。例如，在某处存储Auth令牌。

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

装载程序使用HttpClient Interceptor Angular 4

1 个答案: