Angular - subscribe to http service callback

Question

I'm struggling to understand this..

In my requests.service I have this function that calls my backend:

loginUser(username, pw): Observable <any>{
    const body = {
      username: username,
      password: pw
    }
    let headers = new HttpHeaders();
    headers = headers.append("Authorization", "Basic " + btoa('test:test'));
    headers = headers.append("Content-Type", "application/json");

   return this.http.post('https://website.com/1/user/login', body, {headers: headers})
   .subscribe((data)=>{ //use methods in our service
     console.log(data)
     this.userData = data;
   }, (err)=> console.log(err));
  }

This works, the data is returned.

Now, in login.page.ts I want to call loginUser but I also want a callback on it so I know when it has successfully been run, so I do:

this.req.loginUser(info.email, info.password).then((data) => {
  console.log(data)
})

but I get the error:

this.req.loginUser(...).then is not a function

If I just console.log it with no callback it works fine, but I need to know when the call has been successful.

Any ideas?

Answer 1

It's an observable coming back not a promise. So .then is not applicable.

this.req.loginUser(info.email, info.password).pipe().subscribe((data) => {
  console.log(data) // whenever data returns do something with it
})

We use pipe() to be able to do more things with subscriptions such as:

.pipe(
   take(1) // will allow the subscription to return 1 time then unsubscribe 
   takeUntil() // subscribe until a condition is met
   map() // map your observable
   etc.
) 

Answer 2

Since loginUser returns an Observable, you need to subscribe to it.

this.req.loginUser(info.email, info.password).subscribe((data) => {
  console.log(data)
})

Answer 3

you need to update the loginUser like this in case you want to use the observable and you don't need to subscribe inside the loginUser

loginUser(username, pw): Observable <any>{
    const body = {
      username: username,
      password: pw
    }
    let headers = new HttpHeaders();
    headers = headers.append("Authorization", "Basic " + btoa('test:test'));
    headers = headers.append("Content-Type", "application/json");
    const url = 'https://website.com/1/user/login';
   return this.http.post(url, body, {headers: headers}); // 👈

  }

invoke the method like this 👇

this.req.loginUser(info.email, info.password).subscribe((data)=>{ 
         console.log(data);
         this.userData = data;
}, (err)=>{
         console.log(err)
});

in case you want to use the then method and you want to invoke the method imidaily use toPromise method to convert the observable to promise

loginUser(username, pw): Promise <any>{
    const body = {
      username: username,
      password: pw
    }
    let headers = new HttpHeaders();
    headers = headers.append("Authorization", "Basic " + btoa('test:test'));
    headers = headers.append("Content-Type", "application/json");
    const url = 'https://website.com/1/user/login';
   return this.http.post(url, body, {headers: headers}).toPromise(); // 👈

  }

now you can use the then method

this.req.loginUser(info.email, info.password).then((data)=>{ 
         console.log(data);
         this.userData = data;
 }).
 catch( err => console.log(err));

💣💥

The key difference between two ways if it observable this 👉 this.req.login User(info.email, info.password) will not run until you subscribe but in case of promise this 👉 this.req.login User(info.email, info.password) will run the method even without using then the request will send to the server 🔥🔥