javascript - 我的函数正在返回 [对象承诺]

Question

我正在尝试获取星球大战角色及其家乡的列表。homeworld 是一个链接，所以它需要另一个 fetch 来获取名称，但在控制台中它返回 [Object promise]。我认为问题在于尝试获得实际的行星名称需要太长时间。但是我该如何解决这个问题？

const processStarWars = function (jsonObject) {
    let arrStarWarsPeople = jsonObject.results;

    for (const personage of arrStarWarsPeople){
        const name = personage.name;
        const birthYear = personage.birth_year;

        const planet = fetch(personage.homeworld)
                .then(function (response) {
                //antwoord van functie fetch bekijken
                if (!response.ok){
                    throw error(`Er lijkt een fout te gebeuren, status code ${response.status}`);
                }else{
                    console.log("object goed gevonden");
                    return response.json();
                }
            }).then(function(jsonObject){
                //alles is ok dus, we kunnen het object verwerken en doorgeven
                console.log(jsonObject.name);
                return jsonObject.name;
            }).catch(function (error) {
                //opvangen van een eventuele fout
                console.log(`Er was een fout bij het verwerken van de JSON, fout:${error}`);
            });
        
        console.log(`${name} - ${birthYear} - ${planet}`)
    }


};


const loadStarWarsInfo = function() {
    fetch("https://swapi.co/api/people/")
        .then(function (response) {
            
            if (!response.ok){
                throw error(`Er lijkt een fout te gebeuren, status code ${response.status}`);
            }else{
                console.log("object goed gevonden");
                return response.json();
            }
        }).then(function(jsonObject){
        
        console.log("alles oke we kunnen verder");
        processStarWars(jsonObject);
    }).catch(function (error) {
        
        console.log(`Er was een fout bij het verwerken van de JSON, fout:${error}`);
    })
};

document.addEventListener('DOMContentLoaded', function() {
    loadStarWarsInfo();
});

标签： javascriptapiobjectpromisefetch

Answer 1

您可以通过等待 fetch 完成await fetch(personage.homeworld)并需要执行该processStarWars功能来解决此问题async。

演示：

const processStarWars = async function (jsonObject) {
    let arrStarWarsPeople = jsonObject.results;

    for (const personage of arrStarWarsPeople){
        const name = personage.name;
        const birthYear = personage.birth_year;

        const planet = await fetch(personage.homeworld)
                .then(function (response) {
                //antwoord van functie fetch bekijken
                if (!response.ok){
                    throw error(`Er lijkt een fout te gebeuren, status code ${response.status}`);
                }else{
                    console.log("object goed gevonden");
                    return response.json();
                }
            }).then(function(jsonObject){
                //alles is ok dus, we kunnen het object verwerken en doorgeven
                console.log(jsonObject.name);
                return jsonObject.name;
            }).catch(function (error) {
                //opvangen van een eventuele fout
                console.log(`Er was een fout bij het verwerken van de JSON, fout:${error}`);
            });
        
        console.log(`${name} - ${birthYear} - ${planet}`)
    }


};


const loadStarWarsInfo = function() {
    fetch("https://swapi.co/api/people/")
        .then(function (response) {
            
            if (!response.ok){
                throw error(`Er lijkt een fout te gebeuren, status code ${response.status}`);
            }else{
                console.log("object goed gevonden");
                return response.json();
            }
        }).then(function(jsonObject){
        
        console.log("alles oke we kunnen verder");
        processStarWars(jsonObject);
    }).catch(function (error) {
        
        console.log(`Er was een fout bij het verwerken van de JSON, fout:${error}`);
    })
};

document.addEventListener('DOMContentLoaded', function() {
    loadStarWarsInfo();
});