尝试连接另一个字符串时，字符串值变为未定义

Question

我正在使用openweathermap api进行练习。我有一个坐标对象，其键 lat & lon 等于一个字符串。当我将该坐标 obj 传递到另一个函数并尝试将这些字符串与 api 调用字符串连接时，它们变得未定义。我以为我把这些变量的范围定为全局的，但事实似乎并非如此。有人可以告诉我这段代码有什么不正确的地方吗

var apikey = '9575f3355ae129dc91424b5712a7695e';
var coords = {};
var accessOWM='';
function myLocation(){        navigator.geolocation.getCurrentPosition(function(position)       {
    coords.lat = (Math.round(position.coords.latitude*100)/100).toString();
    coords.lon = (Math.round(position.coords.longitude*100)/100).toString();
  });
}
function changeAccess(coordObj, key){
console.log(coordObj);
accessOWM ='http://api.openweathermap.org/data/2.5/forecast?lat='+coordObj['lat']+'&lon='+coordObj['lon']+'&APPID='+key;
}

myLocation();
console.log(coords);
changeAccess(coords, apikey);
console.log(accessOWM);

Answer 1

那是

因为getCurrentPosition方法是异步的。这意味着getCurrentPosition 的回调在调用函数时不会被调用changeAccess。所以你必须changeAccess调用getCurrentPosition的回调：

function myLocation() {
    navigator.geolocation.getCurrentPosition(function(position) {
        coords.lat = (Math.round(position.coords.latitude*100)/100).toString();
        coords.lon = (Math.round(position.coords.longitude*100)/100).toString();
    });
    changeAccess(coords, apikey);
}

Answer 2

异步代码有问题。 navigator.geolocation.getCurrentPosition(successCallback)函数是异步函数，successCallback不会立即执行，而是会有一些延迟。这就是为什么当你调用console.log(coords)和changeAccess(coords, apiKey)时，坐标还没有定义。您需要从.getCurrentPosition()回调内部调用这些函数（以及最后一个函数）。

Answer 3

由于 coords 是在 changeAccess 的父作用域中声明的，因此不需要将 coordObj 传递到 changeAccess 中。你试过吗：

 accessOWM ='http://api.openweathermap.org/data/2.5/forecast?lat='+ coords.lat + '&lon=' + coords.lon + '&APPID='+key;

Answer 4

var apikey = '9575f3355ae129dc91424b5712a7695e';
var accessOWM;
function round(v){ return Math.round(v*100)/100 }
function myLocation(){
    navigator.geolocation.getCurrentPosition(function(position){
        changeAccess(position.coords);
    });
}
function changeAccess(coords){
    console.log(coordObj);
    accessOWM ='http://api.openweathermap.org/data/2.5/forecast?lat=' + round(coords.latitude) + '&lon=' + round(coords.longitude) + '&APPID=' + apikey;
    console.log(accessOWM);
}
myLocation();

或

var apikey = '9575f3355ae129dc91424b5712a7695e';
var accessOWM = myLocation().then(changeAccess);
accessOWM.then(function(v){
    console.log(v);
})
function round(v){ return Math.round(v*100)/100 }
function myLocation(){
    return new Promise(function(resolve){
        navigator.geolocation.getCurrentPosition(function(position){
            resolve(position.coords);
        });
    });
}
function changeAccess(coords){
    return 'http://api.openweathermap.org/data/2.5/forecast?lat=' + round(coords.latitude) + '&lon=' + round(coords.longitude) + '&APPID=' + apikey;
}