Как дождаться завершения вызова ajax, прежде чем переходить к следующему?

Question

У меня есть ситуация, когда мне нужно сделать несколько запросов AJAX.URL-адреса, к которым мне нужно получить доступ, содержатся в виде строк в массиве listOfUrls.

Я хотел бы сделать один запрос ajax, обработать его, передать данные обратно в мое приложение, а затемперейти к следующему.

Базовая версия кода, который я получил в данный момент, заключается в следующем:

var fetch = function(url) {
  $.get(url, function(response) {
    // do stuff with the data
  };
  return someData;
};

for(let i = 0; i < listOfUrls.length; i++) {
  fetch(listOfUrls[i]);
  console.log("Fetching " + listOfUrls);
};

// do more stuff after all requests are finished

Проблема здесь в том, что это асинхронные запросы, и хотя я мог быпотенциально просто использовать синхронные запросы, я не хочу рисковать - и тогда я не смогу использовать console.log в цикле, потому что браузер зависнет.

Что бы я предпочелдля этого нужно использовать обещание для итерации цикла:

var fetch = function(url) {
  $.get(url, function(response) {
    // do stuff with the data
  };
  return someData;
};

for(let i = 0; i < listOfUrls.length; i++) {
  fetch(listOfUrls[i]).done( /* move onto the next one */ ).fail( /* throw an error */ );
  console.log("Fetching " + listOfUrls);
};

// do more stuff after all requests are finished

Обещания, очевидно, не могут принудительно выполнить итерацию цикла for.

Как бы я поступил в реализации этого поведения

Answer 1

Вы можете использовать рекурсию для вызова следующего URL-адреса после успешного завершения предыдущего.

Если бы я хотел, чтобы fetch () также возвращала данные обратно в ту часть скрипта, которая его вызывала, как бы я это сделал?

Поскольку все запросыасинхронный вы ничего не можете вернуть.Чтобы сделать то, что вам нужно, вы можете заполнить массив данными, полученными из всех запросов, а затем передать их другой функции, которую вы вызываете, когда все запросы выполнены, что-то вроде этого:

var obj = [];

function makeRequest(index) {
  $.get(listOfUrls[index || 0], function(response) {
    // do stuff with the response
    obj.push(response);

    if (++index < listOfUrls.length) {
      makeRequest(index);
    } else {
      finaliseRequests(obj);
    }
  });
}

function finaliseRequests(data) {
  // work with all the received data here...
}

makeRequest(); // onload