在返回 Angular HttpClient 中的 observable 之前等待

Question

我在 angular 中有一個服務方法，它調用 HttpClient get 方法如下

searchItem(name: string) {
  const headers = await this.getHeaders();
  return this.httpClient.get<Item[]>(environment.itemService + `items/searchByItem/${name}`, {headers: headers});
}

到目前為止，我一直在沒有標題的情況下使用它，並且在我訂閱每個這樣的方法的組件中。

現在我必須為標題調用這個getHeaders() async方法並在調用 API 之前設置它們。 所以問題是第一行返回promise ，第二行返回Observable 。 如何獲取標頭，調用 API 並像以前一樣返回一個 Observable 作為此searchItem的最終結果？

Answer 1

await 僅在異步 function 中有效。 'await' 表達式只允許在異步函數中和模塊的頂層使用。 您需要在 function 定義之前使用async 。

async searchItem(name: string) {
  const headers = await this.getHeaders();
  return this.httpClient.get<Item[]>(environment.itemService + `items/searchByItem/${name}`, {headers: headers});
}

或等待 promise 使用then方法完成詢問，如下所示。

searchItem(name: string) {
   return this.getHeaders().then(headersVal => {
       return this.httpClient.get<Item[]>(environment.itemService + items/searchByItem/${name}`, {headers: headersVal});
  });   
}