await for http request in angular

Question

I am having an issue turning this http request into a promise or something that I can wait for. I need to wait for the response because it contains the record id that was created with the request iself.

the function addChannelField is being called from 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

      })

  }

the function is being called from another component using the following line:

  this.channelFieldsService.addChannelField(formData) 

I am tried adding async, await... that did not work. I think I am suppose to wrap this function in a promise but I cant get it to work

I found this exact question on stackoverflow but they dont show the answer, they only describe it. so i dont get it

Answer 1

Try this:

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

}

More about toPromise: https://www.learnrxjs.io/learn-rxjs/operators/utility/topromise

NOTE: toPromise is deprecated since version 7.x of rxjs