Javascript - Iterate an array and call Jquery Ajax requests and wait for a request finished before moving to next request?

Question

I need to iterate an array (or a simple for loop) to run Ajax request to a server. The problem is, to run next element, current Ajax request must finish first.

I've tried so far like this but it does not work as it seems it does not wait for 1 Ajax request finished before moving to the next request. I thought promise with then can do it but it is not.

var ajax = function(rasqlQuery) {

return new Promise(function(resolve, reject) {
    var getURL = "http://test" + "?username=rasguest&password=rasguest&query=" + encodeURIComponent(rasqlQuery);
                  $.ajax({
                    url: getURL,
                   // Not using async: false here as the request can take long time
                    type: 'GET',
                    cache: false,
                    timeout: 30000,
                    error: function(error) {
                        alert("error " + error.statusText);
                    },
                    success: function(result) { 
                        resolve(result) ;
                    }
                });   
});

}

var promise;

for (var i = 0; i < 10; i++) {
    // It should send Ajax request and wait the request finished before running to next iteration. 
    // Or if not possible, it can register 10 requests but they must be run sequentially.
    promise = ajax("select 1 + " + i).then(function(result) { 
        console.log("i: " + i);
        console.log("Result: " + result);
    });
}

Instead of returning promise use async/await in function(rasqlQuery) — Code Maniac, Dec 06 '18 at 12:20
Btw, [use `Promise.resolve` instead of `new Promise` to wrap jQuery deferreds](https://stackoverflow.com/a/31327725/1048572). — Bergi, Dec 06 '18 at 13:25

score 5 · Accepted Answer · answered Dec 06 '18 at 12:29

Promise is an async operation, so instead of issuing it in the loop, you need to chain them together, by saying that the next fetch should only happen after (.then) previous one finishes:

var promise = Promise.resolve();

for (var i = 0; i < 10; i++) {
  // You need to use this IIFE wrapper or ES2015+ let otherwise printed `i`
  // will always be 10 because interaction between async behavior and closures
  (function (i) {
    promise = promise.then(function () {
      return ajax("select 1 + " + i).then(function(result) {
        console.log("i: " + i);
        console.log("Result: " + result);
      })
    })
  })(i);
}

promise.then(function () {
  console.log("all done");
})

Thanks, it is what I needed (the console.log(i) is nice to have with closure)). The main part is promise will run in a sequence. — Bằng Rikimaru, Dec 06 '18 at 12:34

Javascript - Iterate an array and call Jquery Ajax requests and wait for a request finished before moving to next request?

1 Answers1

Linked