5

我正在使用HttpInterceptorAngular 的 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 调用。所以服务一直在等待。

4

2 回答 2

7

更新：添加了一个工作 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被平面映射以返回该next.handle()方法返回的可观察序列或抛出一个终止的可观察对象Observable.throw()。

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

于 2017-12-15T15:05:07.073 回答
0

你没有返回observable里面if。试试这个

return http.post('/auth/silentCall', {user: 123}).subscribe(
于 2017-12-15T14:57:46.900 回答