如何在 Angular 中將 async/await 方法編寫為 Observable？

Question

我曾經做 async/await 並且剛剛學會在 Angular 中使用 Observable，因為它是 Angular 方式，所以我想在這里重構這個代碼片段以使其成為一個 Observable：

async refreshToken() {
    const headers = this.authStorage.getRequestHeader();
    const body = {
      refreshToken: this.authStorage.getStoredValue('refreshToken'),
    };
    const newAccessToken = await this.http
      .post<any>(ApiURLStore.REFRESH_TOKEN_URL, body, { headers: headers })
      .toPromise();

    this.authStorage.setValueToStore('accessToken', newAccessToken);
  }

所以基本上我正在向我的后端發出一個發布請求並取回一個令牌，然后在 authStorage 中使用它。

我嘗試將其作為 Observable 執行此操作，並且到目前為止：

refreshToken(): Observable<any> {
    const headers = this.authStorage.getRequestHeader();
    const body = {
      refreshToken: this.authStorage.getStoredValue('refreshToken'),
    };
    return this.http
      .post<any>(ApiURLStore.REFRESH_TOKEN_URL, body, { headers: headers });

    this.authStorage.setValueToStore('accessToken', newAccessToken);
  }

這沒關系並且有效，但我不能以這種方式調用我的 authStorage。 我無法將它保存在變量中，因為 Observable 需要返回......我也嘗試使用 pipe 並訂閱但沒有機會。

有小費嗎？

Answer 1

您可以在tap運算符中執行副作用邏輯：

return this.http
    .post<any>(ApiURLStore.REFRESH_TOKEN_URL, body, { headers: headers })
    .pipe(
        tap(newAccessToken => this.authStorage.setValueToStore('accessToken', newAccessToken))
    );