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.

Answer 1

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.