Angular 可观察的 HttpInterceptor ForkJoin 不工作

Question

我看到很多人提到了这方面的问题，但没有找到任何解决方案。我做了一个 HttpInterceptor 来将令牌添加到我的请求中。由于我使用 Firebase 进行身份验证，因此检索令牌需要一个可观察对象。一切正常，并且添加了令牌，但如果我将多个请求与 forkJoin.

组合在一起，它就不起作用

HttpInterceptor:

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return this.auth.idToken.pipe(
        mergeMap((token: any) => {
            if (token) {
                request = request.clone({ setHeaders: { Authorization: `Bearer ${token}` } });
            }
            return next.handle(request);
        })
    );
}

部分服务:

forkJoin(
    this._dataService1.fetch(),
    this._dataService2.fetch(),
).subscribe(
    ([dataService1Data, dataService1Data]) => {
        alert("Completed");  // <-------- This line of code is never reached
    }
)

不幸的是，即使我在“网络”选项卡中看到两个请求都已成功完成，但代码中的上述行从未到达。有人可以给我一个解决方案吗？（上面的两种获取方法都会触发 Http GET 请求。）

编辑:

this._dataService1.fetch().subscribe(data => {
    console.log(data);
});
this._dataService2.fetch().subscribe(data => {
    console.log(data);
});

上面的代码工作得很好。正如我提到的，它确实适用于个人请求，但不适用于 forkJoin.

Answer 1

forkJoin 仅在 Observable 完成时发出。但是，您的 Observable 拦截器永远不会完成。将 take(1) 运算符添加到您的拦截器：

return this.auth.idToken.pipe(
        take(1),
        mergeMap((token: any) => {
            if (token) {
                request = request.clone({ setHeaders: { Authorization: `Bearer ${token}` } });
            }
            return next.handle(request);
        })
    );

Answer 2

Observable 需要完成 forkJoin 才能发出。如果可观察对象是流，您可以使用 RxJS combineLatest and pipe in a take(1)。尝试以下

combineLatest(
  this._dataService1.fetch(),
  this._dataService2.fetch(),
).pipe(
  take(1)
).subscribe(
  ([dataService1Data, dataService1Data]) => {
    alert("Completed");  // <-------- This line of code is never reached
  }
);

Angular 可观察的 HttpInterceptor ForkJoin 不工作

Angular Observable HttpInterceptor ForkJoin Not Working

httpclient

fork-join

angular-http-interceptors

angular