从我的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方法太长了，所以它会继续使用代码的其余部分，并将其显示为未定义的。

然后，我看到了这些承诺，并试图将其添加到函数中，但现在html页面只显示了对象承诺。getCountry函数如下所示，在添加允诺代码之前是相同的。

这就是我想要达到的目标

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

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);
        }
    }
    );
}

我哪里出问题了？

使用@Zohaib Ijaz建议更新代码

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);
        });
}
});
}

getCountry函数

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次)

默默无闻的(承诺) test.html:1

Answer 1

我注意到的是，您正在调用Promise.resolve(result)；当您在函数开始时实例化这个承诺时，您传递给它一个带有两个参数的函数，resolve和reject。这些都是你应该用来“结束”你的承诺，所以把它们改为只有resolve(result)和reject(reason)应该让你的承诺得到正确的解决。

也就是说，承诺的意义是说“做这件事，当这件事做完后，.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
}

我不确定承诺是否有效，因为您是在连接过程中调用函数的。如果您的其他函数进行异步调用，您可能考虑的另一种方法是以承诺的方式重写所有异步函数，然后使用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.
})