Handle multiple response in javascript

Question

Hi I am hitting 5 web services in parallel using angluarjs. Now when the response arrives, I am unable to identify the service to which it belongs.

How can I know which response is which?

The demo code is:

var requestUrl=[url1,url2,url3,url4,url5];
for(var i=0;i<requestUrl.length;i++){
      $http.get(requestUrl[i]).success(response){
          console.log(response);
      };
 }

This depends entirely upon the calling code. There are many techniques, but we need to see your code that is calling the 5 web services to make a meaningful suggestion rather than launch into a generic discussion that covers the hundreds of possible ways this could be done. FYI, the most common answer is that you use a closure so you have access to which request it was when you get the completion callback. How best to do that depends entirely upon how your code is structured. — jfriend00, Feb 04 '15 at 05:41
i think this helps http://stackoverflow.com/questions/3880381/xmlhttprequest-responsetext-while-loading-readystate-3-in-chrome — m0bi5, Feb 04 '15 at 05:42

score 2 · Answer 1 · edited Feb 04 '15 at 09:23

The problem here is that you don't know which request respond because you didn't isolate your context. Let's explain:

var requestUrl=[url1,url2,url3,url4,url5];
for(var i=0;i<requestUrl.length;i++){
    // Here you're making an async call to a URL
    $http.get(requestUrl[i]).success(response){
        // When the response arive, i=4, it appends after the loop is over
        console.log(response);
    };
}

To avoid this,there are 2 good practices:

-> Changing your loop to a "forEach'

var requestUrl=[url1,url2,url3,url4,url5];
requestUrl.forEach(function(url) {
    $http.get(url).success(response){
        console.log(url '+' response);
    };
}

-> Keep a for loop but use a closure to keep the index, or the URL

var requestUrl=[url1,url2,url3,url4,url5];
for(var i=0;i<requestUrl.length;i++){
     // Here you can keep "i" in "index"
    (function(index) {
        $http.get(requestUrl[i]).success(response){
            console.log(requestUrl[index] + response);
        };
    })(i);
}

score 0 · Answer 2 · answered Feb 04 '15 at 05:52

0

If you do:

$http.get('/someUrl').
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

From the headers you can get the Host HTTP header and compare based off of that.

answered Feb 04 '15 at 05:52

Shahar

1,687
2
12
18

I tried this, but all of the services are hosted on same server.So getting same header with each response. – Ashish_B Feb 04 '15 at 05:56
@Ashish_B Then add some return value in the GET request to identify each one. – Shahar Feb 04 '15 at 05:57
@Ashish_B That or make your AJAX calls synchronous. – Shahar Feb 04 '15 at 05:59
Thanks.. but got the answer, you can keep $http request method inside another function and pass url as a parameter, then the responses will be identified based on the urls they are mapped to – Ashish_B Feb 04 '15 at 06:26

score 0 · Answer 3 · answered Feb 04 '15 at 06:26

You can deal with your specific problem a number of ways, but it's unlikely to do what you're probably trying to do at a higher level. That said...

You have an array of URLs to fetch. You could store your responses in an array too, and then you'll know which is which:

var requestUrl = [url1,url2,url3,url4,url5];
var responses = [];

for (var i = 0; i < requestUrl.length; i++){
    responses[i] = null;

    $http.get(requestUrl[i]).success(function (response) {
        responses[i] = response;
    });
}

Of course you'll have to find a way to tie into the final .success() call to do your console.log() (or whatever you're doing next).

Handle multiple response in javascript

3 Answers3