如何从 Angular 拦截器执行异步操作？

Question

我正在尝试在发出网络请求之前执行异步操作。

由于某种原因，网络请求甚至没有启动。我基本上希望请求保持到 accessToken$ observable 中的下一个函数被触发。

据我所知，我将 accessToken$ 与 return 从 next.handle(req) 编辑的可观察对象进行了管道传输，从而导致了中间件 then(..).then(..) 行为。

代码：

public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const accessToken$: Observable<string> = from("accessToken");

    return accessToken$.pipe(mergeMap((accessToken: string) => {
        req = req.clone({
            setHeaders: {
                'Authorization' : `${accessToken}`,
            }
        })
        return next.handle(req);
    }));
}

我想弄清楚为什么这种中间件行为不起作用。或者为什么它可以工作但是拦截器仍然出于某种原因阻止请求出去。

值得一提的是，如果我只是 return next.handle(req)，请求就会通过。所以我的内心告诉我，我定义的可观察交互有问题。

我遵循了这个教程： Async HTTP Interceptors with Angular 4.3

Answer 1

如果添加捕获错误，它会在输出中记录任何内容吗？

  public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const accessToken$: Observable<string> = of("accessToken");

    return accessToken$.pipe(mergeMap((accessToken: string) => {
      const tokenRequest = req.clone({
        setHeaders: {
          'Authorization': `${accessToken}`,
        }
      });
      return next.handle(tokenRequest);
    }),
      catchError((error) => {
        console.log(error);
        return throwError(error);
      }));
  }

如何从 Angular 拦截器执行异步操作？

How to perform async operation from Angular interceptor?

interceptor

observable

rxjs

angular