Subscribe http.post that is placed inside a promise Angular 6

Question

It gets complicated to me when I mix the promise with subscribe and another async task together.

This is my auth service:

getCurrentUserToken(){
    return new Promise((resolve,reject)=>{
      firebase.auth().currentUser.getIdToken(/* forceRefresh */ true).then(function(idToken) {
        resolve(idToken)
      }).catch(function(error) {
        reject(error)
      });
    }) 
  }

This is my HTTP service:

sendEmail(email) {

    return this.authService.getCurrentUserToken().then(token => {
      const httpOptions = {
        headers: new HttpHeaders({
          'Content-Type': 'application/json',
          'Authorization': 'Basic server-Password',
        })
      };
      let data = email
      data['idToken'] = token
      return this.http.post(this.apiServer + 'sendEmail', data, httpOptions)
    })

  }

This is how I call the sendEmail(email) function at the component:

    Observable.fromPromise(this.httpService.sendEmail(element)).subscribe(
      data3 => {
        console.log(data3)

      }, error => {
        console.log(error)
      }
    ))

I have to pass currentUserToken to the API to let the API authenticate the user session. Still, both of the the getCurrentUserToken() sendEmail() are running in async, so I have to use Promise to pass the Token to sendEmail() function, and let the sendEmail function to call the API to send the email.

Without the promise, I am able to subscribe to the http.post like this:

this.httpService.sendEmail(element).subscribe(
          data3 => {
            console.log(data3)

          }, error => {
            console.log(error)
          }
        ))

Unfortunately, I screwed it up when I added the promise into it, and the console.log is returning this: Observable {_isScalar: false, source: Observable, operator: MapOperator}

Please advise on how to subscribe to the http.post that is placed inside the Promise.

Answer 1

There's seriously no need of Complicating things here.

I'll use async/await syntax here and for that, we'll have to work with Promises instead of Observables. Good thing is, we can leverage the toPromise() method on an Observable value to change it to a Promise

Focus on my comments in the code as well

Here's the implementation

For getCurrentUserToken

getCurrentUserToken() {
  return firebase.auth().currentUser.getIdToken(true);
  // This will already return a Promise<string>
  // So no need to do a .then and then return from there.
}

For sendEmail

async sendEmail(email) {
  // Since getCurrentUserToken returns a Promise<string> we can await it
  const token = await this.authService.getCurrentUserToken();
  // token will now have the Current User Token
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': 'Basic server-Password',
    })
  };
  let data = email
  data['idToken'] = token
  return this.http.post(this.apiServer + 'sendEmail', data, httpOptions).toPromise();
  // Notice how we're calling the .toPromise() method here 
  // to change Observable into a Promise
}

How to use it?

This code will go in your Component Method where you were previously calling this.httpService.sendEmail. DO MAKE SURE TO MARK THAT FUNCTION AS async THOUGH.

// We can only await something in a function which is declared of type async
async sendEmail() {
  try {
    const data = await this.httpService.sendEmail(element);
    // Since sendEmail again returns a Promise, I can await it.
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}