Angular 2: Http asynchronous call

Question

I am using Http Service from Angular2 :

My login component:

    doLogin() {
        this.authenticationService.inValidateSession();    
 this.authenticationService.userConfiguration=this.httpService.login(this.user.email,this.user.password)
        this.router.navigate(['/site']);

    }

Once user submits credentials , dologin with invalidate the old session if any.
Will do the server login
And will save the user configuration it will get from the server like name and groups... _ And will redirect to default homepage.

HttpService

login(username:string,password:string) {
     let headers = new Headers();
     this.createAuthorizationHeader(headers,username,password);
     this.http.get(this.url,{headers:headers}).subscribe(this.extractData,this.handleError);
     return this.configFromLogin;  
}

private extractData(res: Response) {
  if(res.status==200){
    let body = res.json();
    var result={"config":body,
                "x-xsrf-token":res.headers.get('x-xsrf-token')};
    this.configFromLogin=result;
  }
  else{
    //console.log(error);
    // throw exception or use this.error() method
  }
}

Since Server provides Token authentication which we need to use for all the Post Requests, i save it in Session.

My Problems or Doubts:

When i debug doLogin() codes get executed first (saveInSession) even before HttpService extractData is executed. Why ? i know Http get is async call but how can i make doLogin wait ?
In HttpService i am checking if response is 200 then i am saving it otherwise i want to throw error and use the HandleError method , which i am using in subscribe method of Observable. Is it possible ?

Please help me with above two problems, in case of questions i am available to answer.

Thanks

@Supamiu : this is just result from server , which i am sending back. var result={"config":body, "x-xsrf-token":res.headers.get('x-xsrf-token')}; I will store it in session — lesnar
– lesnar, Commented Nov 3, 2016 at 10:42
Possible duplicate of How to handle the return value of async function in typescript? — mbojko
– mbojko, Commented Oct 16, 2019 at 10:36

Supamiu · Accepted Answer · 2016-11-03 10:51:32Z

You problem is that you don't wait for the http request to be complete before calling router.navigate.

Your service should return an observable in order to tell the calling component that the request is finished and everything is good to navigate.

login component

    doLogin() {
        this.authenticationService.inValidateSession();    
        this.httpService.login(this.user.email,this.user.password).subscribe(result => {
            this.authenticationService.userConfiguration=result;
            this.router.navigate(['/site']);
        }, 
        error => {
            console.error(error);
        });
    }

HttpService

login(username:string,password:string):Observable<any> {
     let headers = new Headers();
     this.createAuthorizationHeader(headers,username,password);

     //We will return the http observable, mapped with our auth function
     return this.http.get(this.url,{headers:headers}) 
     .map(this.extractData);//We bind the authentication process on the observable
}

private extractData(res: Response) {
    if(res.status !== 200){
        throw new Error('Not a 200, bla bla details');
    }
    let body = res.json();
    var result={"config":body,
                "x-xsrf-token":res.headers.get('x-xsrf-token')};
    return result;
}

EDIT: I added a throw in the extractData method, it allows you to throw an error which will be catched by rxjs and handled in the onError parameter of subscribe.

Collectives™ on Stack Overflow

Angular 2: Http asynchronous call

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related