Make synchronus http requests with Observables

Question

I am working on angular 2 project. I have to make n number of http Requests. But i need to wait to get the data from previous request to make next request.

How can I achieve this with Observables.

I am doing:

_.forEach(data, (path) => {
        this.userService.getTreeNodes(path.id)
          .subscribe(
            data => {
              //do something
            }
          );
      });

So right now, three simulatneous requests are going.

did you gave a try to promises.?? [Refer](http://stackoverflow.com/questions/36648263/angular2-observable-and-promise) — Manish, Dec 04 '16 at 11:43
I am trying to figure out how to do it using observables and rxjs opeartors. — ashfaq.p, Dec 04 '16 at 11:50

score 1 · Accepted Answer · answered Dec 04 '16 at 12:16

flatMap - Operator is the keyword, which will help you to solve your problem.

flatMap is how we handle dependencies between observables. My sample is contrived, but I am returning a value from the first observable that is needed by the second observable to calculate a sum.

Like I said this example is contrived, but if we compare this to promises, flatMap is how we would create the equivalent of promise chains. The code can be seen below.

let first = Observable.of(10);
first.flatMap((operand1) => {
  return Observable.of(operand1 + 10);
})
.subscribe(res => this.flatMappedStreams = {msg: '10 + 10 = ' + res});

Source from http://www.syntaxsuccess.com/viewarticle/combining-multiple-rxjs-streams-in-angular-2.0

If he needs to wait for the previous httprequest to finish `concatMap` might be a better fit — Mark van Straten, Dec 04 '16 at 17:30

score 1 · Answer 2 · answered Dec 05 '16 at 18:43

Here is an example for a login function that first gets a accessToken from facebook, then sends that token to a second service to get the user profile.

login(): Observable<any> {

let fas: FacebookAuthResponse = {
  accessToken: null,
  expiresIn: null,
  signedRequest: null,
  userID: null,
};

let fbResponse: Subject<any> = new Subject();
let userProfile: Subject<any> = new Subject();

this.fb.login().then((response: FacebookLoginResponse) => {
    fbResponse.next(response.authResponse);
  }), (error: any) => {
  console.error(error);
};

fbResponse
  .map((far: FacebookAuthResponse) => far.accessToken)
  .mergeMap(accessToken => this.processLogin(accessToken))
  .subscribe(res => userProfile.next(res));

return userProfile

}

processLogin(token){

let headers = new Headers({ 'Authorization': 'Bearer facebook ' + token });
let options = new RequestOptions({ headers: headers });

return this.http.get('http://localhost:8000/user-profile/', options)

}

Here I use rxjs Observable and rxjs Subject. I would recommend reading this article: http://blog.angular-university.io/how-to-build-angular2-apps-using-rxjs-observable-data-services-pitfalls-to-avoid/

fbResponse.next(response.authResponse);

When this.fb.login is resolved, call next on the fbResponse Subject to further process the fb.login response.

.map((far: FacebookAuthResponse) => far.accessToken)

here map is used to get the accessToken from the fbLogin response.

What happens next is not part of your question, but might be interesting.

.mergeMap(accessToken => this.processLogin(accessToken))
.subscribe(res => userProfile.next(res));

mergeMap let's us subsribe to the last call in the request chain, and return that value.

So when we subscribe to this login request, the user profile from the last call is returned when all request are completed synchronously.

Make synchronus http requests with Observables

2 Answers2