angular2 2 async call

Question

Angular2, typescript

I have a component that displays 1 object at a time from the server.

On the click of a button, the form does some action on the object, sends data to the server. Immediately in the next line, the next object is got.

this.rawS.updateTags({......}); //Update object
this.candidateC.footerNavigateTo(.....);//Get next object

But there is a race condition where ajax to get next object reaches the server before the updateTags ajax reaches the server.

Code of updateTags is

  updateTags(rawCandidate) {
    this.baseAjaxService.doPost(this.baseUrl + 'tags/update', rawCandidate)
      .subscribe(data => {
        console.log(data);
      });
  }

Code for doPost is

doPost(url, inputParamJSON){
    let httpResponse  = this.http
      .post(url, inputParamJSON, this.options)
      .map(this.extractData)
      .catch(this.handleAjaxError);
    return httpResponse;
}

The route for 'continue_screening' has a route resolver which brings the next object.

How can I ensure that footerNavigateTo() runs only after updateTags has completed its full cycle?

This is not a race condition. What you're doing is calling this.candidateC.footerNavigateTo() before the this.rawS.updateTags() callback is invoked. In other words, you're not waiting for the AJAX call to complete before acting on it. @Vincismique's answer is correct, you need to use flatMap in order to chain the calls. This answer also might help: stackoverflow.com/questions/34104638/… — Daniel T.
– Daniel T., Commented Feb 17, 2017 at 23:19

ZanattMan · Accepted Answer · 2017-02-16 08:33:58Z

2

If what you want is to have different behaviours depending on where the function updateTags(rawCandidate) is called, I propose the following solution:

  updateTags(rawCandidate, action) {
    this.baseAjaxService.doPost(this.baseUrl + 'tags/update', rawCandidate)
      .subscribe(
       data => {
        action(data);

      },
      error => {
          console.log("error"); //handle error here
      });
  }

Then you can call the function like this:

updateTags(rawCandidate, function(data){
   console.log(data);
   this.candidateC.footerNavigateTo(.....);//here you can use data
});

edited Feb 16, 2017 at 8:33

answered Feb 15, 2017 at 10:41

ZanattMan

7361 gold badge9 silver badges26 bronze badges

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

2 Comments

Sonal Over a year ago

The flow is such that updateTags() is used in multiple flows. Cannot have the footerNavigateTo() call in that function.

ZanattMan Over a year ago

Then you want a different action depending on where you call updateTags?

Community · Accepted Answer · 2017-05-23 12:17:36Z

1

What you want to achieve here is to chain your two http calls, make them dependents somehow. In Angular 1.X it would be done using promise but with AngularJS 2 you can achieve that using flatMap.

See this link http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http at Dependent calls section.

PS : As indicated in this post (Combining promises in Angular 2) you can also use toPromise() to transform your Observable (i.e. your async http call) into a Promise, if you are more familiar with it.

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Feb 16, 2017 at 8:46

Vincismique

845 bronze badges

Collectives™ on Stack Overflow

angular2 2 async call

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related