Angular4 - Nested Http Calls

Question

I'm using a http nested call in angular.

First Call to get a token. Second call will be using token and returning actual data.

  public get(api) {
    return this.http.get(this.url + '/token')
      .map(res => res.json())
      .toPromise()
      .then((data: any) => {
        this.access_token = data.access_token
        let headers = new Headers();
        headers.append('Authorization', 'Bearer ' + this.access_token);
        return this.http.get(this.url + api, {
          headers: headers
        }).map(res => res.json());
      })
  }

The function returns Promise<Observable<any>>. How to parse the response so i can get the data from nested call in a subscription.

this.get('me/profile')
    .subscribe(data => {
         console.log(data);
      });

Try removing the .toPromise(). That should return an Observable<any>. I recommend you to use type (Class) to map data so the results are object rather than JSON strings. Like Java. — Prav
– Prav, Commented Aug 28, 2017 at 20:27
Either be consistent with promises (return a promise from then callback) or observables (flatmap over the second call). Mixing is a recipe for disaster. — jonrsharpe
– jonrsharpe, Commented Aug 28, 2017 at 20:28
You're mixing two different methods of handling async data, which is hellish in it's own right. Either produce Promise Chaining to get the data, use .then or switch away from the conversion to a promise being returned in your get function. — L.P.
– L.P., Commented Aug 28, 2017 at 20:29

Dharman · Accepted Answer · 2020-03-21 17:17:07Z

6

You could use RxJS operators such as switchMap to streamline this nested call and without using toPromise().

Map to observable, complete previous inner observable, emit values.

You are effectively passing emitted values of first observable to the next observable (your second HTTP call). This allows you subscribe to the final results in your usage example.

It is important that within the switchMap() you return the inner observable, in this case the HTTP call for this to function effectively.

As others have indicated, toPromise() is not necessary as you can take advantage of RxJS operators to complete this async, dependent action.

public get(api) {
  return this.http.get(this.url + '/token')
    .map(res => res.json())
    .switchMap(data => {
        this.access_token = data.access_token;
        let headers = new Headers();
        headers.append('Authorization', 'Bearer ' + this.access_token);

        return this.http.get(this.url + api, { headers: headers });
    })
    .map(res => res.json());
}

usage

this.get('me/profile').subscribe(data => console.log(data));

Note: With Angular 4+ HttpClient, you don't need to explicitly call json() on the response as it does it automatically.

edited Mar 21, 2020 at 17:17

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Aug 28, 2017 at 20:29

Alexander Staroselsky

39k16 gold badges83 silver badges98 bronze badges

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

3 Comments

Alexander Staroselsky Over a year ago

At the very minimum you can try using the catch operator, but I'd check out the following discussion on strategies to handling the inner errors. Thanks!

Hrushikesh Patel Over a year ago

The link you provided has nothing related to switchmap and subscribe.

Alexander Staroselsky Over a year ago

The link describes error handling with "nested" observables such as flatMap(). The same strategies can be used, including catch() and Observable.just(). The syntax may look slightly different, but it's the same principles. There is no one right way to approach this, it really depends on the application and situation. There are also questions on Stack Overflow such as this describing similar strategies. Thanks!

Collectives™ on Stack Overflow

Angular4 - Nested Http Calls

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related