Question

我对Javascript和API还是很陌生，我真的很想了解更多有关它们的信息！我一直在学习一些使用一些非常简单的API的教程，但是在尝试进行多个API调用时遇到了问题。

我做了一个函数，可以从API里面获取信息，但是当我多次手动调用它或通过for循环调用它时，它只能将最后一个与我的html文件准确地集成在一起。

我很新，所以我不确定在这种情况下我到底在做什么错。我正在使用在这里找到的Pokemon API：https://pokeapi.co/

const app = document.getElementById('root')

const container = document.createElement('div');
container.setAttribute('class', 'container');

app.append(container);

var request = new XMLHttpRequest()

function getPokemon(pokeNum) {
    request.open('GET', 'https://pokeapi.co/api/v2/pokemon/' + pokeNum + '/', true);

    request.onload = function() {
        var data = JSON.parse(this.response);
        console.log(data);

        const card = document.createElement('div');
        card.setAttribute('class', 'card');

        const h1 = document.createElement('h1');
        h1.textContent = data.name;

        const frontSprite = document.createElement('img');
        frontSprite.src = data.sprites.front_default;

        container.appendChild(card);
        card.appendChild(h1);
        card.appendChild(frontSprite);
        console.log(data.name);
    }
    request.send();
} 
getPokemon(2);
getPokemon(3);

例如，当我尝试进行request.onload时，在函数的console.log(data.name)部分中，仅getPokemon(3)调用的名称显示在控制台中，而不显示getPokemon(2) < / p>

如何进行多个API调用？

0 个答案: