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

【问题标题】：How to perform async operation from Angular interceptor?如何从 Angular 拦截器执行异步操作？
【发布时间】：2019-11-10 02:05:40
【问题描述】：

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

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

据我了解，我将 accessToken$ 与从 next.handle(req) 返回的 observable 进行管道传输，从而导致中间件 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);
    }));
}

我试图弄清楚为什么这种中间件行为不起作用。或者为什么它正在工作，但拦截器由于某种原因仍然阻止请求发出。

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

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

【问题讨论】：

如果你放一个console.log，返回之前的部分会运行吗？它会击中你的拦截器吗？
还让我们看看 this.authTokensManager.getAccessTokenForEndpoint(req.url) 做了什么
是的，我正在调试代码，它甚至命中了 next.handle(req)
this.authTokensManager.getAccessTokenForEndpoint(req.url) 只是创建一个 rxjs Subject 并在获得令牌后调用它的下一个函数
请发布 authTokensManager 的代码。订阅时，主题不会发出它的当前值。您需要重播或行为主题，这可能是一个问题，具体取决于代码的外观。您的拦截器代码看起来像标准的身份验证拦截器代码，因此问题不存在。它正在做它应该做的事情，所以我们需要看看 observable 它的管道。

标签： angular rxjs observable interceptor

【解决方案1】：

如果你添加一个 catch 错误，它会在输出中记录任何内容吗？

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

【讨论】：

这有助于查看以前以某种方式隐藏的错误 - 不会输出到控制台或抛出任何地方。错误是我输入的自定义标题不好。谢谢@shadowfox476！