Как сделать несколько запросов AJAX с циклом for

Question

Я практикую API Звездных войн (SWAPI) и пытаюсь напечатать названия всех планет. Тем не менее, данные планеты содержатся на разных страницах, так как мне сделать несколько запросов AJAX для печати всех данных? Вот что у меня есть:

for (var i = 1; i <= 7; i++) {
    var xhr = new XMLHttpRequest();
    var link = 'https://swapi.co/api/planets/';
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var planets = JSON.parse(xhr.responseText);
            var responseHTML = '<p>';
            for (i in planets.results) {
                responseHTML += planets.results[i].name;
            }
            responseHTML += planets.results[1];
            responseHTML += '</p>';
            //console.log(planets.results.length);
        }
        document.querySelector('main').innerHTML = responseHTML;
    };
    xhr.open('GET', link);
    xhr.send();
    link += '?page=' + i;
}

Answer 1

Вместо использования цикла я бы использовал рекурсивную функцию. Причина этого заключается в том, что он будет ожидать возврата запроса, прежде чем будет запущен следующий запрос. Если вы используете цикл, результаты могут возвращаться не в том порядке, в котором вы ожидаете.

Кроме того, вы можете воспользоваться fetch, чтобы сделать запрос. fetch - более современный способ выполнения запросов AJAX.

См. Пример кода ниже.

// set index to zero
let index = 0;

const performAjaxRequest = index => {
  // fetch request will only be made if index is less than 7
  if (index < 7) {
    // increase index by one below using index++
    // first time code runs it will be 1, second time 2, third time 3...
    // this gives the same effect as using a loop
    index++;

    // make fetch call and add index to the url
    fetch(`https://swapi.co/api/planets/?page=${index}`).then(res => {
       return res.json();
    }).then(res => {

       // this loop is to display each country from the response on the screen
       for (var i = 0; i < res.results.length; i++) {
         document.body.append(res.results[i].name + ', ');
       }
       // below is the key and what makes this a recursive function. 
       // The function calls itself.
       // After the response has been received from the API the function is 
       // called again which which will trigger another fetch request
       performAjaxRequest(index);
    })
  }
}

// trigger initial invocation of the function
performAjaxRequest(index);

Answer 2

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

Я считал, что вы хотите сохранить в "responseHTML" ответ на все эти запросы. Примерно так:

var link = 'https://swapi.co/api/planets/';
var responseHTML = "";
makeRequest(1,7,link);

function makeRequest(index,max,link)
{
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var planets = JSON.parse(xhr.responseText);
            responseHTML += '<p>';
            for (i in planets.results) {
                responseHTML += planets.results[i].name;
            }
            responseHTML += planets.results[1];
            responseHTML += '</p>';
            //console.log(planets.results.length);
        }

        if(index<=max)
        {
            link += '?page=' + i;
            index++;
            makeRequest(index++,max,link);
        }
        else
        {
            //This means I finished so I put the responseHTML and finish the code.
            document.querySelector('main').innerHTML = responseHTML;
        }
    };
    xhr.open('GET', link);
    xhr.send();
}

Answer 3

$('.checkbox:checkbox:checked').each(function (index, element) {
  $.ajax({
  // your ajax code
  });
});

Код выше для списка флажков, которые отмечены, и вы нажимаете данные каждого флажка