壓扁 Promise <observable<httpevent<any> &gt;&gt; 到可觀察的<httpevent<any> &gt; </httpevent<any></observable<httpevent<any>

Question

給定的 Angular HTTP 攔截器必須實現

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

返回的Observable<HttpEvent<any>>通常是next.handle(req)的產物（在 - 也許 - 以某種方式修改請求之后）。

就我而言，我需要設置一些標頭，但要在內部找到哪些標頭，我需要調用一些返回Promises的方法。 像這樣：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  const req1: Promise<HttpRequest<unknown>> = this.service.getFutureValue().then(value => {
    const headers = req.headers.append('X-Custom-Header', value);
    return req.clone({headers});
  });
  ...
}

我需要使用req1鏈接next ：

const x = req1.then(r => next.handle(r));

現在我有一個Promise<Observable<HttpEvent<any>>> ，但我需要以某種方式將其轉換為Observable<HttpEvent<any>> 。

從概念上講，我認為這在某種程度上是有效的，因為Promises和Observables都是未來值。

我很確定這是一個簡單的轉換，但我不知道如何。

編輯

這可能有效： from(x).pipe(mergeAll()) 。 但我會繼續尋找更具可讀性的東西。

Answer 1

以下情況如何：

return from(this.service.getFutureValue())
  .pipe(
    mergeMap(x => {
      const headers = req.headers.append('X-Custom-Header', x);
      return next.handle(req.clone({ headers }));
    })
  )

或可選：

return from(this.service.getFutureValue())
  .pipe(
    map(x => {
      const headers = req.headers.append('X-Custom-Header', x);
      return req.clone({ headers });
    }),
    mergeMap(next.handle)
  )