Javascript - итерация массива и вызов запросов Jquery Ajax и ожидание завершения запроса, прежде чем переходить к следующему запросу?

Question

Мне нужно перебрать массив (или простой цикл for) для запуска Ajax-запроса к серверу.Проблема в том, что для запуска следующего элемента текущий Ajax-запрос должен завершиться первым.

Я до сих пор пробовал вот так, но он не работает, так как кажется, что он не ждет, пока 1 Ajax-запрос завершится, прежде чем перейти кследующий запрос.Я думал, обещание с , тогда может это сделать, но это не так.

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);
    });
}

Answer 1

Promise - это асинхронная операция, поэтому вместо ее выдачи в цикле вам нужно объединить их в цепочку, сказав, что следующая выборка должна происходить только после (.then) предыдущей операции:

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");
})