別のajax呼び出しから変数を渡す

Question

私はこのコードを持っていますLocalweather App私は2つの関数を作成しました。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
$(document).ready(function() { 
 

 
    var city = "Newcastle"; 
 
    
 
    city = getLocation(); 
 
    //set city to location from function; 
 
    console.log ("city undefined?" +city); 
 
    //this is undefind, why? 
 
    
 
    getWeather(city).then(function(data) { 
 
    console.log(data); 
 
    var weatherType = data.weather[0].description; 
 
    var weatherId = data.weather[0].id; 
 
    var tempF = Math.round(data.main.temp); 
 
    var tempC = Math.round((tempF - 32)/1.8); 
 
    var wind = data.wind.speed; 
 
    var name = data.name; 
 
    console.log(weatherType); 
 
    $('#weather').html(weatherType); 
 
    $('#temp').html(tempC + "&#176;C"); 
 
    $('#wind').html(tempF + "&#176;F"); 
 
    $('#icon').html(weatherId); 
 
    $('#location').html(name); 
 
    
 
    }) 
 
}); 
 

 
function getLocation() { 
 
    $.getJSON('http://ipinfo.io', function(data) { 
 
    console.log("data" + data); 
 
    city = data.city; 
 
    console.log("city" + city); 
 
    return city; 
 
    }) 
 
} 
 

 
function getWeather(place) { 
 
    return $.getJSON('http://api.openweathermap.org/data/2.5/weather?q=' + place + '&units=imperial&APPID=90d625c068e3f3d7818b9e4237871e21'); 
 
} 
 
</script>

場所に取り、その場所の天気オブジェクトを返しますgetWeather機能。私はまた、IPに基づいて私の都市を返すようにしたいgetLocation関数を持っています（はい、私は正確ではないが、私が使いたいものを知っています）。

都市をハードコードすると機能します。 しかし、getLoction関数から都市変数を使用しようとしても動作しません。 私はそれが非同期であったと推測していますが、getLoction関数でコールバックを使用すると、 'city'が返され、getWeatherに渡されます。 私の考えは間違っていますか？

Answer 1

AJAX呼び出しからの非同期応答を待つ必要があるため、ネストされたコールバックを処理する必要があります。

あなたのコードでgetLocationはgetJSONが終了したときに値を返すだけなので、非同期機能が終了して次のステートメントまで実行されるのを待つことはありません。

あなたの関数がこのように振る舞う場合は、あなたが望むものではなく戻り値を得るでしょう（この次のコードスニペットを使用しないでください）。

function getLocation() { 
    $.getJSON('http://ipinfo.io', function(data) { 
    return data.city; // this will be ignored, because the browser will jump to the next statement 
    }); 
    return "XXX"; // <- this will be returned, because the browser will not wait for async functions to finish 
} 

以下の例では、パラメータとして関数をgetLocationに渡します。パラメータ名はcallbackであり、$.getJSON('http://ipinfo.io'を実行するとdataパラメータでこの関数を呼び出します。

cityを抽出してからgetWeatherを呼び出すことができます。 getLocationはもはや代わりに、それはコールバックにdataパラメータを渡し、任意の値を返します（またはあなたがgetLocationでcityを抽出して、代わりにコールバックにcityを渡すことができます）どのように

注意してください。 getLocation()で

$(document).ready(function() { 
 

 
    getLocation(function(data) { 
 
     var city = data.city; 
 
     getWeather(city).then(function(data) { 
 
     // ... 
 
     }); 
 
    }); 
 
    }); 
 

 
    function getLocation(callback) { 
 
    $.getJSON('http://ipinfo.io', function(data) { 
 
     callback(data); 
 
    }); 
 
    } 
 

 
    function getWeather(place) { 
 
    return $.getJSON('http://api.openweathermap.org/data/2.5/weather?q=' + place + '&units=imperial&APPID=90d625c068e3f3d7818b9e4237871e21'); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script>

Answer 2

getWeatherはgetLocationが実行され、都市に値が割り当てられるのを待たずに、都市はまだ定義されていません。あなたはオールウェイズ

$.getJSON('http://ipinfo.io', function(data) { 
console.log("data" + data); 
city = data.city; 
console.log("city" + city); 

$.getJSON('http://api.openweathermap.org/data/2.5/weather?q=' + city + '&units=imperial&APPID=90d625c068e3f3d7818b9e4237871e21'); 
}) 

を置くことができるか、市が行われます場合にのみ天候を取得する実行するには、jQuery.Deferred()オブジェクトを使用することができます。

Answer 3

return city;のみ$.getJSONに渡された匿名関数function(data)から返します。

function getLocation() { 
    return $.getJSON(... 
} 

：次に getLocationは次のようになり

getLocation().then(function (data) { 
    console.log(data); 
    getWeather(data.city).then(... 
}); 

：あなたのgetLocationは実際にこれを処理するcity = undefined

一つのアプローチはgetJSON約束を利用することもできますreturn文はありません

答えからわかるように、nested callbacksまたはPromisesを使用してこれを行う方法はたくさんあります。

Here you can see my codepen in action

Answer 4

基本的には、あなたは、あなたはAJAX呼び出しチェーンにしたい場合は、これは非同期呼び出し力学

$(document).ready(function() { 

    getLocation().then(function(city){ 
     getWeather(city.city).then(function(data) { 
     console.log(data); 
     var weatherType = data.weather[0].description; 
     var weatherId = data.weather[0].id; 
     var tempF = Math.round(data.main.temp); 
     var tempC = Math.round((tempF - 32)/1.8); 
     var wind = data.wind.speed; 
     var name = data.name; 
     console.log(weatherType); 
     $('#weather').html(weatherType); 
     $('#temp').html(tempC + "°C"); 
     $('#wind').html(tempF + "°F"); 
     $('#icon').html(weatherId); 
     $('#location').html(name); 

     }, function(err){ 
     console.log("ERROR!", err); 
     }) 
    }, function(err){ 
    console.log("ERROR!", err); 
    }); 
}); 

function getLocation() { 
    return $.getJSON('http://ipinfo.io'); 
} 

function getWeather(place) { 
    return $.getJSON('http://api.openweathermap.org/data/2.5/weather?q=' + place + '&units=imperial&APPID=90d625c068e3f3d7818b9e4237871e21'); 
} 

Answer 5

で、それ以外の都市は未定義になり、コールopenwheater前ipinfoコールバックを待つ必要が前のコールバックの中で次のAJAXコールを設定する必要があります。このようにして、次のAJAXコールは前のコールが完了した後にのみ送信されます。

この回答はIPアドレスを使用して都市の代わりに緯度/経度を取得するわずかなバリエーションです&これは天気に使用します。

http://codepen.io/anon/pen/ZOpEBQ

var ip = '8.8.8.8'; 
 

 
$.get('https://ipapi.co/'+ip+'/latlong/', function(data){ 
 
    
 
    data = data.split(','); 
 
    console.log(data); 
 
    
 
    $.get('http://api.openweathermap.org/data/2.5/weather?lat='+data[0]+'&lon='+data[1]+'&units=imperial&APPID=90d625c068e3f3d7818b9e4237871e21', function(data1) { 
 
    
 
    // Should print the weather 
 
    console.log(data1); 
 
    
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>