使用Google Maps Javascript API在外部函数中使用内部函数变量

Question

我对Javascript还很陌生，所以如果这个问题已经得到回答，请原谅，但我无法让它发挥作用，也无法在网上找到答案。我正在尝试使用谷歌地图JavaScript API返回地址。我可以在内部函数内将其打印到控制台，但如果我试图在该函数外访问它，则它正在打印未定义的内容。如何访问外部函数中的变量并返回它？？

function getAddress(latlng) {
var address;
var service = new google.maps.Geocoder();

service.geocode({ location: latlng}, function(results, status) {
if (status === "OK") {
if (results[0]) {
address = results[0].formatted_address;
console.log(address); //prints address
} 
}
});
console.log(address); //prints undefined
}

Answer 1

问题是一个经典的异步gotcha，其中address只有在调用回调后才可用，通常，当需要回调时，这意味着不能保证其结果在执行之外可用，而且由于我认为涉及到网络请求，因此结果不可能及时到达，以便您立即记录address。

var value;
api.thing(callbackThatSetsValue)
console.log(value);

问题的gits就在那里：value不能指向任何东西，因为callbackThatSetsValue将在执行下一行代码后被调用。

这里至少有2个选项，让我们看看这些选项是什么样子的。。。

等待结果

此选项允许您在地址解析后执行任何需要的操作。

function getAddress(latlng, after) {
var service = new google.maps.Geocoder();
service.geocode({ location: latlng}, function(results, status) {
if (status === "OK")
if (results[0])
after(results[0].formatted_address);
});
}

例如，上面的实用程序允许您getAddress({lat:50,lng:1}, console.log)，或者传递任何应该呈现、使用、显示此类地址的回调。

这种方法的缺点是，如果status不是OK，那么您将永远有一个挂起的回调，因为它永远不会被调用。

或者，您可以在该函数中放入一个else，并传递一个错误或null，然后在回调中做出相应的反应。

承诺方式

这是目前最常见的模式，因此我提出了建议。

function getAddress(latlng) {
return new Promise(function ($, _) {
var service = new google.maps.Geocoder();
service.geocode({ location: latlng}, function(results, status) {
if (status === "OK")
if (results[0])
$(results[0].formatted_address);
_(new Error("status was " + status));
});
});
}

在这种情况下，您getAddress({lat:50,lng:1}).then(console.log).catch(console.error)，因此当地址无效时，您有一种转义/反应方式。