Angular HttpInterceptor - 处理异步响应

Question

我正在编写 Angular 使用 IndexedDB 缓存数据的应用程序。

每当应用程序即将对服务器进行特定的 http 调用时我想从 IndexedDB 检索此数据并丰富或替换来自服务器的响应。

问题是从 IndexedDB 检索数据是 return 可观察的异步操作，我无法 return 将修改后的数据返回给调用服务。

拦截器看起来像这样：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

  return next.handle(req).map((event) => {
    if (event instanceof HttpResponse) {
      console.log("before cacheResponseProccess");

      const val: Observable<HttpEvent<any>> = this.angularCache.cacheResponseProccess(event);

      val.subscribe(x => {
        console.log('Return modified response is:');
        console.log(x);
        return x;
      });
    }
  }).catch((error, caught) => {
    return Observable.throw(error);
  });
}

请在 https://stackblitz.com/edit/angular-owqgb6

查看问题示例

Answer 1

您需要 return map 运算符中的东西（return 异步回调中的值不会真正 return 它们到外部函数)。此外，当您检索异步结果以替换原始 HttpResponse 时，您可以将 map 更改为 mergeMap 运算符和 return 其中的 Observable。

尝试使用以下代码示例：

return next.handle(req).mergeMap((event) => {   // use mergeMap instead of map
  return new Observable(ob => {                 // return new Observable to retrieve asynchronous data
    if (event instanceof HttpResponse) {
      console.log("before cacheResponseProccess");

      const val: Observable<HttpEvent<any>> = this.angularCache.cacheResponseProccess(event);

      val.subscribe(x => {
        console.log('Return modified response is:', x);
        ob.next(x);         // return modified result
      });
    }
  });
}).catch((error, caught) => {
  return Observable.throw(error);
});

固定demo.

Answer 2

你可以这样做：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  if (req.url.indexOf('https://api.someurl.com/') > -1) {
    let authReq: HttpRequest<any> = req;

    return this.authService.getCurrentSession().pipe(
      mergeMap(
        (session: Session) => {
          const token: string = session.getToken();
          authReq = req.clone({
            headers: req.headers.set('Authorization', token)
          });
          return next.handle(authReq);
        }
      ), 
      catchError(
        (error) => {
          console.error('Intercept error, couldn\'t add authorisation headers', error.message);
          next.handle(authReq);
          return of(error);
        }
      )
    );
  } else {
    return next.handle(req);
  }
}

Angular HttpInterceptor - 处理异步响应

Angular HttpInterceptor - Handle with async response

asynchronous

indexeddb

angular-http-interceptors

angular