在实际调用Angular的HttpInterceptor之前调用另一个httpCall

Question

我正在使用HttpInterceptor新的Angular的api,HttpClientModule现在陷入困境.这是我的用例.

在我的应用程序中,如果任何服务进行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

记下调用的顺序以及使用浏览器的开发工具添加的标题.

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

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

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

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正在进行flatmaped 的响应以返回next.handle()方法返回的可观察序列或抛出已终止的observable Observable.throw().

还要注意if条件已被删除,因为如果api调用失败,则调用catch块(或者在订阅的情况下调用错误处理函数)