javascript - 如何在同一个函数中进行 100 次调用以迭代 api 端点？ [波卡皮]

Question

我需要迭代 151 个 pokemon，但 api 端点看起来像这样 https://pokeapi.co/api/v2/pokemon/1 其中 1 是第一个 pokemon，我需要迭代到 151，每次调用不同的端点。有一个更好的方法吗？这是我到目前为止的代码，它不起作用。

let pokeObj = {};

function pokeList() {
const url ='https://pokeapi.co/api/v2/pokemon/'
const xhr = new XMLHttpRequest();
xhr.onload = function() {
    if (xhr.status === 200) {
        for(let i = 1; i < 100; i++) {
            pokeObj += JSON.parse(xhr.responseText);
            xhr.open('GET', `${url + i.toString()}`, true);
            xhr.send();
        }
    }
}

}

Answer 1

尝试这样的事情:

(async () => {

    let pokeObj = {};

    const url ='https://pokeapi.co/api/v2/pokemon'
    const xhr = new XMLHttpRequest();

    for(let i = 1; i < 100; i++) {

         const response = await new Promise(resolve => {

            xhr.onload = function(e) {
                resolve(e.target.response);
            }

            xhr.open('GET', `${url}/${i}`, true);
            xhr.send();

        });

        console.log(response)

    }

})();

在触发下一个请求之前，将等待每个请求，以便对 api 服务器友好，并且不会并行执行太多请求。