无法在 angular 服务的 Observable 中使用 promise

Question

我有一个 wrap-http 服务，我将其用作 HttpClient 之上的包装器。在 wrap-http 服务中我有一个方法

createHeaderOptions

从存储服务中获取用户令牌，将令牌添加到 header 选项中并 returns 它。我为每个请求调用此方法。在 createHeaderOptions AuthService.getLoggedUser() 中是一个承诺，当我添加 await 和 async with AuthService.getLoggedUser() 时，它会抛出 get、put、post 错误, delete 和 patch 方法，因为它们的 return 类型是 Observable。我该如何处理？

wrap-http.service.ts

export class WrapHttpService {
  private static async createHeaderOptions(headers) {
    let user = {};
    await AuthService.getLoggedUser()
      .then((result) => {
        user = result;
      });

    if (!_.isEmpty(user)) {
      if (!headers) {
        headers = {};
      }
      headers[`Authorization`] = 'Bearer ' + user[`tokenInfo`];
      headers[`Accept`] = '*/*';
    }

    const httpOptions = {};
    if (headers) {
      httpOptions[`headers`] = new HttpHeaders(headers);
    }
    return httpOptions;
  }

  get(url: string, headers?: object): Observable<any> {
    return this.http.get(url, WrapHttpService.createHeaderOptions(headers));
  }
  post(url: string, data: object, headers?: object): Observable<any> {
    return this.http.post(url, data, WrapHttpService.createHeaderOptions(headers));
  }
  put(url: string, data: object, headers?: object): Observable<any> {
    return this.http.put(url, data, WrapHttpService.createHeaderOptions(headers));
  }
  patch(url: string, data: object, headers?: object): Observable<any> {
    return this.http.patch(url, data, WrapHttpService.createHeaderOptions(headers));
  }
  delete(url: string, headers?: object): Observable<any> {
    return this.http.delete(url, WrapHttpService.createHeaderOptions(headers));
  }
}

如有任何帮助，我们将不胜感激。

Answer 1

首先，您可能希望为此使用 HttpInterceptor 而不是手动传递 headers。 https://angular.io/api/common/http/HttpInterceptor

如果您想手动执行，它可能如下所示：

export class WrapHttpService {
  private static createHeaderOptions(headers) {
    return AuthService.getLoggedUser().then((user) => {
        if (!_.isEmpty(user)) {
          if (!headers) {
            headers = {};
          }
          headers[`Authorization`] = 'Bearer ' + user[`tokenInfo`];
          headers[`Accept`] = '*/*';
        }

        const httpOptions = {};
        if (headers) {
          httpOptions[`headers`] = new HttpHeaders(headers);
        }
        return httpOptions;
    });
  }

  get(url: string, headers?: object): Observable<any> {
    return from(this.createHeaderOptions(headers)).pipe(
      switchMap(headers => this.http.get(url, WrapHttpService.createHeaderOptions(headers));)
    )
  }

  /* ... */
}

说明：将 createHeaderOptions 重写为 return 承诺。现在使用 rxjs 的 from 方法从 promise 创建一个 observable，然后使用 switchMap 切换到由 this.http.get 方法

编辑的 observalbe

无法在 angular 服务的 Observable 中使用 promise

unable to use promise in Observable in angular services

angular

promise

http-headers

angular-httpclient

angular2-observables