How to make synchronous call in Angular 4 in component method

Question

I have an Angular 4 login Application. I have written accessing logic in login.cmponent.ts file and accessing my login.service.ts file which in turn again calls an authentication service.

When I call authenticate method from my login component, it returns false. By the time it executes remaining code then authentication service returns true because we know Angular run code in asynchronous way.

This is my code:

Login Component Method:

this.loginService.setLoginData(
    new LoginModel( this.userId, this.bankId, this.password )
  ).checkIfLoginSuccessfull();

Login.service Method:

this.authService
  .attemptAuth(credentials);

Authentication Service method:

attemptAuth(credentials): void {

  this.restService
    .post('/authenticate', credentials)
    .subscribe(
    data => this.setAuth(data.token),
    err => this.destroy());

}

Code is working fine. But I want to get results the moment I finish executing checkIfLoginSuccessfull(). I know I am not doing or calling methods ( Observables correctly ).

Please help. :)

You can't escape from asynchronism. Transforming an asynchronous call to a synchonous one is just not possible (nor desirable). — JB Nizet
– JB Nizet, Commented Sep 15, 2017 at 8:35
Don't try to make the call sync, rather learn how to chain promises and observables. There are lots of tutorials. This is one of the most frequent questions. The question doesn't contain enough code to make concrete suggestions. — Günter Zöchbauer
– Günter Zöchbauer, Commented Sep 15, 2017 at 8:35
It's just 3 level method call. Last one authService executing code properly. How can I chain them so I access the desired result in first LoginComponent method once the line executes. — Aakash Kumar
– Aakash Kumar, Commented Sep 15, 2017 at 9:04

Michał Ochociński · Accepted Answer · 2018-06-28 09:53:22Z

5

You should surround this

this.restService
    .post('/authenticate', credentials)
    .subscribe(
      data => this.setAuth(data.token),
      err => this.destroy());

into "Observable.create".

Observable.create(observer => {
  this.restService
    .post('/authenticate', credentials)
    .finally(() => observer.complete())
    .subscribe(
      data => observer.next(data.token)
      err => observer.error(err);
 }

and then

this.authService.attemptAuth(credentials).subscribe(...);

edited Jun 28, 2018 at 9:53

answered Sep 15, 2017 at 12:04

Michał Ochociński

4553 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Aakash Kumar Over a year ago

attemptAuth(credentials): Observable<any> {      this.purgeAuth();      return Observable.create(observer => {       this.restService.post('/authenticate', credentials)         .finally(observer.complete())         .subscribe(           data => {             observer(data.token);             console.log('Observer: ' + data.token );           },       err => observer.error(err)         )      })

Michał Ochociński Over a year ago

add this in the top of the page: import { Observable } from "rxjs/Rx";

Aakash Kumar Over a year ago

It is already there. :) still it's not working. Now it is making asynchronous call though. Observable.create() is returnable right? That's how I am using it in login-service method this.authService.attemptAuth(credentials).subscribe(). It is getting executed and I can see proper output in mail. But it is not going in this.authService.attemptAuth(credentials).subscribe() 's Data method where I have code which I want to execute.

Michał Ochociński Over a year ago

my mistake, change "observer(data.token)" to "observer.next(data.token)"

Collectives™ on Stack Overflow

How to make synchronous call in Angular 4 in component method

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related