Question

我正在尝试使用 JavaScript fetch 获取一些信息。像这样：

function apiReq (ids){
var api = ("https://anapioficeandfire.com/api/characters/" + ids);
fetch(api)

.then (result => result.json())
.then ((res) => { 
    
    (res)
    
    var charInfo = document.getElementById("banner");
   
    var label = document.querySelector(".characters__container");
    var cardBody = document.querySelector(".card-body");
    var ul = document.createElement("ul");
    label.appendChild(ul);
    charInfo.appendChild(label);

    switch (ids) {

            case ids:   cardBody.innerHTML += "<h3 class='card-title'>" + res.name + "</h3>";
                        cardBody.innerHTML += "<p class='card-text'> Title: <br>" + res.titles[0] + "</p>";
                        
                        if(res.titles[0] == "") {
                
                        cardBody.innerHTML += "<p class='card-text'>Unknown</p>";
                            
                        }
            
                        cardBody.innerHTML += "<p class='card-text'>Alias: <br>" + res.aliases[0] + "</p>";
                        cardBody.innerHTML += "<p class='card-text'> Born: <br>" + res.born + "</p>";
                break;
    }
    
})
    
.catch (error => console.log(error))
    
};

apiReq(148);    // Arya Stark
apiReq(583);    // Jon Snow
apiReq(957);    // Sansa Stark
apiReq(338);    // Eddard Stark
apiReq(529);    // Jamie Lannister
apiReq(1052);   // Tyrion Lannister
apiReq(565);    // Joffrey Baratheon
apiReq(901);    // Robert Baratheon
apiReq(1022);   // Theon Greyjoy
apiReq(1303);   // Daenerys Targaryen

我想要的是让 ids 按顺序出现，这样它总是先获取 Arya Stark，然后是 Jon Snow 等等......我怎么能做到这一点？或者它是一种使获取始终以特定顺序获取的方法（可能使用排序或其他方式）？

以特定顺序获取它们很重要，以便与我为此项目获得的不同图像相匹配。

Answer 1

您需要使函数异步并等待每个请求按顺序进行

async function apiReq (ids){
// your code
}

await apiReq(148);    // Arya Stark
await apiReq(583);    // Jon Snow
await apiReq(957);    // Sansa Stark
await apiReq(338);    // Eddard Stark
.
.
.

Answer 2

如果要保证fetch顺序，需要使用async/await语法：

const charInfo = document.getElementById("banner");
const label = document.querySelector(".characters__container");

const apiReq = async (id) => {

    const api = ("https://anapioficeandfire.com/api/characters/" + id);

    try {
        const response = fetch(api);
        const res = await response.json();

        var cardBody = document.querySelector(".card-body");
        var ul = document.createElement("ul");

        label.appendChild(ul);
        charInfo.appendChild(label);

        cardBody.innerHTML += .....

    } catch (error) {
        console.log(error)
    }

};

( async() => {
    await apiReq(148);    // Arya Stark
    await apiReq(583);    // Jon Snow
    await apiReq(957);    // Sansa Stark
    await apiReq(338);    // Eddard Stark
    await apiReq(529);    // Jamie Lannister
})()

Answer 3

我想我明白了:) 感谢您对我的帮助和帮助

以特定顺序获取 api 请求

3 个答案: