Question

我有一个带路由和解决方案保护的Angular应用程序。解析保护是异步的，并返回从HttpClient.post返回的observable - 问题是，AJAX请求完成但是observable没有，因此解析器永远不会完成其工作，并且页面永远不会显示。但是，当我通过take(1)管道结果时，它确实完成了，并且工作正常。我的问题是为什么？在AJAX请求返回ok（HttpClient.post）后，Isn＆＃t; t 200 OK应该完成吗？

这是我的解析器的代码：

@Injectable()
export class MyDataResolver implements Resolve<MyData> {
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)
    : MyData | Observable<MyData> | Promise<MyData> {
    return this.svc.getData().pipe(take(1)); // <-- Why is take(1) necessary here??
}

constructor(private svc: MyService) { }

}

以下是调用post的服务方法：

import { HttpClient } from '@angular/common/http';

export class MyService {
  constructor(private http: HttpClient) {}

  getData(): Observable<MyData> {
    return this.http.post('/api/data'), {}).pipe(
      map((resp: { data: SomeData }) => resp.data),
      map(r => convertSomeDataToMyData(r)));
  }
}

由于

Answer 1

我被迫回答了自己的问题，因为我找到了答案。问题源于我使用的拦截器，这是这张图片中隐藏的变量。

我的应用程序使用ngrx进行redux商店管理。我的拦截器点击商店以获得授权令牌。

这是我的拦截器代码：

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor(private store: Store<fromStore.State>,
    private route: Router) { }

  intercept(request: HttpRequest<any>, next: HttpHandler):
    Observable<HttpSentEvent
    | HttpHeaderResponse
    | HttpProgressEvent
    | HttpResponse<any>
    | HttpUserEvent<any>> {
    const rc = this.store.select(x => x.main.token).pipe(
      take(1), // <--- This is where the take(1) was needed
      switchMap(r => {
        const req2 = request.clone({
          setHeaders: {
            Authorization: `Bearer ${r}`
          }
        });
        return next.handle(req2);
      }));
      return rc;
  }
}

正如您所看到的那样，如果没有那个take(1)，拦截器修改的请求实际上永远不会完成，因为商店订阅永远不会完成。

希望这个不起眼的案例可以帮助某人：）

HttpClient帖子没有完成内部的解决方案，除非通过`take（1）`传送

1 个答案: