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

我哪里错了？

使用@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次）

Uncaught（in promise）test.html：1

Answer 1

我注意到你正在呼叫Promise.resolve(result);当你在函数的开头实例化Promise时，你传递了一个带有两个参数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
}

我不确定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.
})

Answer 2

getCountry不是同步函数调用。你需要等待回应。

fetch(url)
.then(res => res.json())
.then((manager) => {
/* console.log(manager); */ 
    for (i in manager.data){
        getCountry(manager, i).then((cm)=> {
          // Add other values as well. 
          var row = $('<br>' + cm + '<br>');
          $('#Results').append(row);
        });   
    }
 });

从我的JavaScript函数返回数据

2 个答案: