在返回 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 仅在 async 函数中有效。 'await' 表达式只允许在异步函数中和模块的顶层使用。您需要在函数定义之前使用async。

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

或等待承诺使用then 方法完成请求，如下所示。

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