以角度等待http请求

Question

我在将此 http 请求转变为承诺或我可以等待的东西时遇到问题。我需要等待响应，因为它包含使用请求本身创建的记录 ID。

函数 addChannelField 正在从 ChannelFieldsService

调用

addChannelField(data: any) {
   
    await this.http
      .post<{ message: string; post: any }>(
        BACKEND_URL,
        postData
      ).subscribe(responseData => {
        console.log('responseData', responseData);
        responseData // this is the data I want to return to function calling this function

      })

  }

使用以下行从另一个组件调用该函数：

  this.channelFieldsService.addChannelField(formData) 

我尝试添加 async、await...但这不起作用。 我想我应该把这个函数包装在一个承诺中，但我无法让它工作

我在 stackoverflow 上找到了这个确切的问题，但他们没有显示答案，他们只是描述了它。所以我不明白

Answer 1

service.ts
public addChannelField(data: any): Observable<any> {
        return this.http.post<{ message: string; post: any }>(BACKEND_URL, postData);
}

component.ts
this.channelFieldsService.addChannelField(formData)
      .subscribe((response: any) => {
          console.log(response.id); // something like this
      });

假设您正在使用（Angular+TypeScript+RxJS）.. 最初的伪代码如下所示。服务必须只返回可观察/承诺，并且组件必须订阅它。 请考虑通过应用最佳实践来使代码变得干净。祝你好运！

Answer 2

试试这个：

addChannelField(postData: any) {
    const data = await this.http
      .post<{ message: string; post: any }>(
        BACKEND_URL,
        postData
      ).toPromoise()

}

有关 toPromise 的更多信息：https://www.learnrxjs.io/learn-rxjs/operators/utility/topromise

注意：

toPromise

自 rxjs 7.x 版本以来已弃用

Answer 3

您可以使用 RXJS 首先ValueFrom 我正在使用 [电子邮件受保护] 参考：https://rxjs.dev/api/index/function/firstValueFrom

导入使用：

import { firstValueFrom } from 'rxjs';

使用示例：

async refreshUserData(): Promise<any> {
    return await firstValueFrom(this.http.get<any>(`${environment.apiUrl}/login/refreshdata`));
}