javascript - 从我的 JavaScript 函数返回数据

Question

我在获取我请求正确显示的数据时遇到了问题，它显示为未定义。

 fetch(url)
.then(res => res.json())
.then((manager) => {
/* console.log(manager); */ 
    for (i in manager.data){
        var row = $('<div id="Data">' + '<br>' + getLogo(manager, i) + '<br>'
                + '<br>' + '<p1>' + getName(manager, i) + '</p1>'   
                + getAdd1(manager, i) + getAdd2(manager, i) + getAdd3(manager, i) 
                + getCity(manager, i) + getPcode(manager, i) 
                + '<br>' + getCountry(manager, i) + '<br>' 

我的问题是调用 getCountry

                + '<br>' + getWeb(manager, i) + '<br>' 
                + '<br>' + getPhases(manager, i) 
                + '<br>' + getPspon(manager, i) 
                + '<br>' + getOspon(manager, i) + '<br>'
                + '<br>' + getDesc(manager, i) + '<br>' 
                + '<br>' + '</div>' + '<br>');

        $('#Results').append(row);
    }           
})
};

经过一些研究，我认为问题在于 getCountry 方法太长，它会继续执行其余代码并将其显示为未定义。

然后我遇到了 Promises 并尝试将其添加到函数中，但现在 html 页面只显示 [object Promise]。getCountry 函数如下所示，与添加 Promise 代码之前相同。

这就是我想要实现的目标

检查是否有地址，然后检查国家代码。为国家分配 3 位数字国家代码。然后加载一个包含 ISO 3166 数据的 JSON，将其处理成一个可搜索的对象。在对象中搜索与存储在 country 中的值匹配的对象。然后将匹配对象中的名称字段分配给结果，然后返回它以显示在地址的末尾。

function getCountry(manager, i){
    return new Promise(function(resolve, reject) {
        if(manager.data[i].attributes.addresses[0] != null && manager.data[i].attributes.addresses[0].country != null){
            var country = manager.data[i].attributes.addresses[0].country;
            var c = country.toString();
            let url = 'http://data.okfn.org/data/core/country-codes/r/country-codes.json';
            fetch(url)
            .then(res => res.json())
            .then((data) => {
            console.log(data);
            console.log(manager);
                        for(var i=0, length=data.length; i<length; i++){
                        if(data[i].M49 === c){
                            var result = data[i].name;
                            console.log(result);
                            Promise.resolve(result);

                        }
                    }
            })
        }
        else {
            var reason = " ";
            Promise.reject(reason);
        }
    }
    );
}

我哪里错了？

Updated code using @Zohaib Ijaz suggestion

fetch(url)
.then(res => res.json())
.then((manager) => {
/* console.log(manager); */ 
    for (i in manager.data){
        /* use a Promise in order to receive the result for the below function */
        getCountry(manager, i).then((cm)=> {
        var row = $('<div id="Data">' + '<br>' + getLogo(manager, i) + '<br>'
                + '<br>' + '<p1>' + getName(manager, i) + '</p1>'   
                + getAdd1(manager, i) + getAdd2(manager, i) + getAdd3(manager, i) 
                + getCity(manager, i) + getPcode(manager, i) 
                + '<br>' + cm + '<br>'
                + '<br>' + getWeb(manager, i) + '<br>' 
                + '<br>' + getPhases(manager, i) 
                + '<br>' + getPspon(manager, i) 
                + '<br>' + getOspon(manager, i) + '<br>'
                + '<br>' + getDesc(manager, i) + '<br>' 
                + '<br>' + '</div>' + '<br>');

        $('#Results').append(row);
        });
}
});
}

获取国家/地区函数

function getCountry(manager, i){
    return new Promise(function(resolve, reject) {
    if(manager.data[i].attributes.addresses[0] != null && manager.data[i].attributes.addresses[0].country != null){
        var country = manager.data[i].attributes.addresses[0].country;
        var c = country.toString();
        let url = 'http://data.okfn.org/data/core/country-codes/r/country-codes.json';
        fetch(url)
        .then(res => res.json())
        .then((data) => {
                    for(var i=0, length=data.length; i<length; i++){
                        if(data[i].M49 === c){
                        var result = data[i].name;
                        /* console.log(result); */
                        resolve(result);
                        }
                        else {
                        var reason = "";
                        reject(reason);
                        }
                    }
        })
    }
    else {
        var reason = "";
        reject(reason);
    }

}
);
}

这是我在 Chrome 控制台中看到的(24 次)

未捕获( promise )test.html:1

Answer 1

我注意到你正在调用 Promise.resolve(result);当您在函数开头实例化 Promise 时，您向它传递了一个带有两个参数的函数，resolve 和 reject。这些是您应该用来“结束”您的 Promise 的，因此将它们更改为 resolve(result) 和 reject(reason) 应该让您的 Promise 正确解决。

也就是说，Promise 的要点是说“做这件事，当那件事完成后，.then 做另一件事”。所以你需要类似的东西

getCountry(manager, i).then(function(result) {
    // result is whatever you passed into resolve() in getCountry
    // everything in here is done after getCountry finishes running
    // and returns a value 
}, function(rejection) {
    // rejection is whatever you passed into reject() in getCountry
    // this only happens if things didn't work
}

我不确定 Promises 是否有效，因为您是在串联过程中调用该函数。如果您的其他函数进行异步调用，您可能会考虑的替代方法是将所有异步函数重写为 Promises，然后使用 Promise.all() 等待所有函数都解析，然后再将它们连接到 HTML 中。像这样

var p1 = getLogo(manager, i);
var p2 = getName(manager, i);
var p3 = getAdd1(manager, i);
...

Promise.all([p1, p2, p3]).then(function(results) {
    results.join('<br>')
    // Whatever else you want to happen once all the functions are finished.
})