Angular 2 wait for nested observables to finish

Question

I need to wait for two of my nested Observables to be completed before navigating to another page. I don't know what is the best way to do this since they are nested, therefore I'm having sync problems in my Angular app. The Observables are being set at my authentication service. authentication.service.ts:

login(username: string, password: string) {
        let reqUrl = AppSettings.__USER_TOKEN_URL;
        let reqHeaders = this.authConfig.token.headers;
        let reqBody = encodeURI(
            this.authConfig.token.body
                .replace(/{{ username }}/g, username)
                .replace(/{{ password }}/g, password));

        //
        // Get token, then get user identity, if login successfull.
        //

        return this.http.post(reqUrl, reqBody, reqHeaders)
            .map((response) => this.getIdentity(response))
            .catch(this.handleErr);
    }

private getIdentity(response: Response) {

        //
        // Get user identity based on token.
        //

        let body = response.json();
        let token = body.access_token;

        if (null != token && undefined != token) {
            this.authConfig
                .identity
                .headers
                .headers.set('authorization', 'Bearer ' + token);

            let reqUrl = AppSettings.__USER_IDENTITY_URL
            let reqHeaders = this.authConfig.identity.headers;
            let reqbody = this.authConfig.identity.body;

            return this.http.post(reqUrl, reqbody, reqHeaders)
                .map((response) => this.setUser(response))
                .catch(this.handleErr)
                .subscribe();
        }
    }

Then at my Login component, I'm trying to call the service login() method, and when it is finished, I want to navigate to another instance. login.component.ts:

login() {
        this.loading = true;
        this.authenticationService.login(this.model.username, this.model.password).subscribe(
            data => { },
            error => { console.log('Error authenticating: ' + error); },
            () => {  this.router.navigate([this.returnUrl]) });
    }

But it's not working. The Observables are still running when router.navigate is triggered. Any ideas for an Angular rookie? Thanks in advance.

Suraj Rao · Accepted Answer · 2017-09-15 10:39:55Z

0

The problem is you are simply calling subscribe inside getIdentity() which doesn't make the two observables sequential.

Instead, you need to return the observable and not the subscription object there and use switchMap.

getIdentity:

private getIdentity(response: Response) {

        //
        // Get user identity based on token.
        //

        let body = response.json();
        let token = body.access_token;

        if (null != token && undefined != token) {
            this.authConfig
                .identity
                .headers
                .headers.set('authorization', 'Bearer ' + token);

            let reqUrl = AppSettings.__USER_IDENTITY_URL
            let reqHeaders = this.authConfig.identity.headers;
            let reqbody = this.authConfig.identity.body;

            return this.http.post(reqUrl, reqbody, reqHeaders)
                .map((response) => this.setUser(response))//return observable.
        }
}

In the login call:

return this.http.post(reqUrl, reqBody, reqHeaders)
        .switchMap((response) => this.getIdentity(response))
        .catch(this.handleErr);

The switchMap will switch to the second observable and return it on completion of the first.

answered Sep 15, 2017 at 10:39

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

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

2 Comments

F.Almeida Over a year ago

Had no ideia switchMap even existed. It is working now. Thank you very much.

Suraj Rao Over a year ago

glad to hear it:)

Collectives™ on Stack Overflow

Angular 2 wait for nested observables to finish

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related