运行按时间顺序同步的 getJSON 请求

Question

您好，我有两个 JSON 天气项目请求，我需要第一个请求的数据，以便为用户个性化第二个请求。我的第一个请求获取用户的纬度和经度，第二个请求需要 url 中该位置当前天气的那些坐标。

 var arrLocat = [];//users suburb, city, country, lat and lon
 var userURL = "";//specific url tailored off users lat and lon
 var userWeather = [];//current weather at users lat and lon

  $(document).ready(function(){
  //first JSON request
    $.getJSON("http://ip-api.com/json", function (data){
     arrLocat = data;
      userURL = "http://api.openweathermap.org/data/2.5/weather?lat=" + arrLocat.lat + "&lon=" + arrLocat.lon + "&appid=61c4ebe6f40d2e2d7085e7c42d287e1d&units=metric";
       console.log(arrLocat);THIS RETURNS FIRST, WORKS FINE
  })
  //second JSON request
    .then(function(){
     $.getJSON(userURL).done(function(index){
      userWeather = index;
       console.log(userWeather);//THIS RETURNS LAST, WORKS FINE BUT SHOULD RETURN SECOND
    });
  })
  //do stuff here
    .then(function(){
     $("#locat").text(arrLocat.city + ", " + arrLocat.regionName + ", " + arrLocat.country);
      console.log(userWeather);//THIS RETURNS BLANK GLOBAL VALUE, NOT CARRYING VALUE FROM SECOND .THEN FUNCTION ALSO SHOULD RETURN LAST NOT SECOND
  })
});

我正在尝试运行按照它们编写的顺序执行这些操作，我知道 getJSON 是异步的，但我认为 .then() 是为了强制执行命令，等待前一个要在执行前完成。

我花了很长时间才弄清楚发生了什么，看来我的最后一个 .then() 是运行在第二个 .then() JSON 请求之前。我是延迟对象的新手，所以我可能会做一些我不知道的根本错误？

Answer 1

通过在彼此内部调用自己将它们链接在一起，无需使用 .then() 这是承诺的一部分，并非所有 API 都以这种方式实现...

var arrLocat = [];//users suburb, city, country, lat and lon
var userURL = "";//specific url tailored off users lat and lon
var userWeather = [];//current weather at users lat and lon

$(document).ready(function(){
//first JSON request
  $.getJSON("http://ip-api.com/json", function (data){
    arrLocat = data;
    userURL = "http://api.openweathermap.org/data/2.5/weather?lat=" + arrLocat.lat + "&lon=" + arrLocat.lon + "&appid=61c4ebe6f40d2e2d7085e7c42d287e1d&units=metric";
    console.log(arrLocat);
    $.getJSON(userURL).done(function(index){
      userWeather = index;
      console.log(userWeather);//THIS RETURNS LAST, WORKS FINE BUT SHOULD RETURN SECOND
      $("#locat").text(arrLocat.city + ", " + arrLocat.regionName + ", " + arrLocat.country);
      console.log(userWeather);//THIS RETURNS BLANK GLOBAL VALUE, NOT CARRYING VALUE FROM SECOND .THEN FUNCTION ALSO SHOULD RETURN LAST NOT SECOND
    });
  });
});

Answer 2

首先，不要使用.done()，只使用.then()。 .done() 是 non-standard 并且有一些奇怪的行为。 .then() 是标准的。

其次，当你在 .then() 中有第二个承诺时，你需要从 .then() 处理程序中 return 它以便正确地链接它。

在结构上，您希望它看起来像这样：

$.getJSON(...).then(function(result1) {
    return $.getJSON(...)
}).then(function(result2) {
   // do stuff here
});

并且请注意，为了将最终结果放入最后一个 .then() 处理程序，这里根本不需要全局变量。您可能还会发现这很有用：

运行按时间顺序同步的 getJSON 请求

Running chronologically synchronous getJSON requests

javascript

ajax

jquery

json

jquery-deferred

运行 按时间顺序同步的 getJSON 请求

Running chronologically synchronous getJSON requests

javascript

ajax

jquery

json

jquery-deferred

运行按时间顺序同步的 getJSON 请求