javascript - 如何使用 for 循环发出多个 AJAX 请求

Question

我正在练习 Star Wars 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);