angular - 在 Angular 的 HttpInterceptor 中进行实际的 http 调用之前，调用另一个 http api(不进行拦截)

Question

我正在使用 Angular 的 HttpClientModule 的 HttpInterceptor api，但现在陷入了困境。这是我的用例。

在我的应用程序中，如果任何服务进行 http 调用，我想在它之前进行另一个静默 http 调用，并希望将其结果存储在本地。一旦静默调用完成，那么只有我会继续服务的 http 调用并返回其结果。

这就是我正在做的事情。 (使用HttpInterceptor)

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.url.match(/api\//)) { // api call
           http.post('/auth/silentCall', {user: 123}).subscribe(
                     (data) => {
                        console.log(data);
                        const clone = req.clone({ setHeaders: { 'Authorization ': tokenService.getToken() } });
                        return  next.handle(clone).do((event: HttpEvent<any>) => {
                            if (event instanceof HttpResponse) {
                                console.log('Service's call response');
                            }
                        }, (err: any) => {
                            if (err instanceof HttpErrorResponse) {
                                console.log('Network call err', err);
                            }
                        });
                     },
                     (err) => {
                        if (err instanceof HttpErrorResponse) {
                           return Observable.throw(err); 
                        }
                 );
                } else {
        console.log('Not an api call..It's an auth call');
       return next.handle(req); // call original auth request.
    }
}

现在，上述代码的问题是，它成功执行内部静默调用，但此后从未调用原始 api 调用。所以服务会永远等待。

Answer 1

更新:添加了一个工作 plunkr。 https://plnkr.co/edit/WFecj8fFZ6z4G6mpLSCr?p=preview

记下调用的顺序以及使用浏览器的开发工具添加的 header 。

另请注意，下面的解决方案使用 RxJS lettable 运算符而不是标准运算符(标准运算符不应该有任何不同的行为。添加此注释以防代码无法编译)

<小时/>

问题的原因是，在调用与 /api 匹配的情况下，intercept 方法永远不会返回句柄。

将您的代码更新为类似于以下内容

intercept(req: HttpRequest<any>, next: HttpHandler):Observable<HttpEvent<any>> {
    if (req.url.match(/api\//)) { // api call
           return http.post('/auth/silentCall', {user: 123}).pipe(switchMap((response) => {
               console.log("Service's call response");
                    
               let clone = req.clone({ setHeaders: { 'Authorization ': tokenService.getToken() } });
               return  next.handle(clone);
           }), catchError((err) => {
               if(err instanceof HttpErrorResponse) {
                   console.log('Your logging here...');
                   let clone = req.clone({ setHeaders: { 'Authorization ': tokenService.getToken() } });
                   return  next.handle(clone);
               }

               return Observable.throw(err); 
           }));
    } else {
       return next.handle(req); // call original auth request.
    }
}

请注意，http.post 的响应被平面化，以返回由 next.handle() 方法返回的可观察序列，或抛出终止的可观察值Observable.throw().

另请注意，if 条件已被删除，因为如果 api 调用失败，则会调用 catch block (或错误处理函数，如果是订阅)