simultaneous ajax requests angularjs?

Question

i want to send multipal ajax request at a time. this is my js code.

Re Check

app.control         


        

Answer 1

I think what you're interested in is $q.all. From the documentation:

---

all(promises);

Combines multiple promises into a single promise that is resolved when all of the input promises are resolved.
Parameters

Param    | Type                             | Details
promises | Array.<Promise> Object.<Promise> | //An array or hash of promises

Returns a single Promise that will be resolved with an array/hash of values, each value corresponding to the promise at the same index/key in the promises array/hash. If any of the promises is resolved with a rejection, this resulting promise will be rejected with the same rejection value.

---

Example

$q.all({
  users: $http.get('https://api.github.com/users'),
  repos: $http.get('https://api.github.com/repositories')
}).then(function(results) {
  var users = results.users.data;
  var repos = results.repos.data;
});

Here's a plunker of this in action.

Update

After rereading the issue a few more times, I realized that making two ajax requests asynchronously while wanting to only have a single callback for both was not the issue of the original question.

From my understanding, the question is asking how to have multiple ajax requests happen simultaneously, with no regards to which happens first, and no need for a common resolved promise callback (as my original answer addresses).

When an ajax request is made (e.g. $http.get(...);), execution of javascript won't stop. If another ajax request is made, it will fire regardless of whether or not the first one finished or not. Having an ajax request continually occurring in an interval loop and having a button event fire an independent ajax request shouldn't cause any conflict.

Although the code in the question isn't ideal, I can't exactly see why the 'get_info' request is waiting for the 'set_info' request to complete. I've created a jsFiddle to try and recreate the original code's functionality and it seems to be working as expected:

http://jsfiddle.net/Tnt56/

I used jsFiddle since it has an /echo/json/ api feature to test ajax functionality. If you open your developer tools to the console, this fiddle will log key points of the ajax requests. The $timeout wrapper fires every 5 seconds and I've set the GetDataajax's response to be delayed by 6 seconds. When the getEventSeconds function gets logged in the console, click the GetDataajax button. It will log that it started, then the getEventSeconds will log again, and finally the GetDataajax will get resolved.

On a side note, I had to use jQuery's $.ajax() instead of Angular's $http because for some reason, the $http posting wasn't playing nice with jsFiddle's echo service, despite playing with the request headers (Content-Type). The request 'works' but the delay feature wouldn't.

Answer 2

I rewrote your controller to use closures in order to make every call asynchronous and keep it DRY.

I tested this and it works, check it out here: http://jsfiddle.net/s6uFx/2/

app.controller('customersCtrl', function ($scope, $http, $timeout) {
  function cget(action) {
    return $http.get('cget.php', {params: {action: action}});
  }

  $scope.getDataajax = function () {
    cget('set_info')
    .success(function (res) {
        console.log(JSON.stringify(res));
    });
  };

  $scope.getEventSeconds = function () {
    cget('get_info')
    .success(function (res) {
      console.log(JSON.stringify(res));
      $scope.list = res;
      $scope.currentPage = 1; //current page
      $scope.entryLimit = 10; //max no of items to display in a page
      $scope.filteredItems = $scope.list.length; //Initially for no filter
      $scope.totalItems = $scope.list.length;
    })
    .then(function () {
      // and start to loop
      $timeout($scope.getEventSeconds, 5000);
    });
  };

  // this call replaces the first $http.get and starts the loop
  $scope.getEventSeconds();
});