How to chain two ajax requests with promises

Question

I am having trouble with ajax/promises. I have two ajax requests total, with the second ajax call relying data to be returned by the first ajax call.

My first ajax call finds Latitude, Longitude, and country code of the value of #search. My second ajax call finds the weather of that city, but the API URL is dependent on the Latitude, Longitude and country code that my first ajax call returns. So the second ajax call can't be started until the first one is finished.

My logic here is that var ajax1 is assigned a promise, and var ajax2 starts after ajax1.then() checks that ajax1's promise is resolved. Then ajax2 runs and returns another promise. Finally ajax2.done starts after it checks that ajax2's promise is resolved, and then starting my successWeatherFunction().

My problem is that ajax2.done is not working, as the console.log("test") is not showing up on the console. The two earlier console.logs, console.log(info) and console.log(weatherApiUrl) are working.

Thanks!

$("#search").keypress(function(event) {
if (event.which === 13) {
  var searchCity = $("#search").val();
  var jsonURL = "http://autocomplete.wunderground.com/aq?query=" + searchCity + "&cb=?"
  var ajax1 = $.getJSON(jsonURL);
  var ajax2 = ajax1.then(function(data) {
    var info = [];
    info.push(data["RESULTS"][0]["name"]);
    info.push(data["RESULTS"][0]["c"]);
    info.push(data["RESULTS"][0]["lat"]);
    info.push(data["RESULTS"][0]["lon"]);
    console.log(info);
    var searchLat = info[2];
    var searchLng = info[3];
    var countryCode = info[1];
    if (countryCode === "US") {
      var weatherApiUrl = "https://api.forecast.io/forecast/{APIKEY}/" + searchLat + "," + searchLng + "?exclude=minutely" + "&callback=?";
    } else {
      var weatherApiUrl = "https://api.forecast.io/forecast/{APIKEY}/" + searchLat + "," + searchLng + "?exclude=minutely" + "?units=si" + "&callback=?";
      console.log(weatherApiUrl);
    }
    return $.getJSON(weatherApiUrl);
  });
  ajax2.done(function(data){
    console.log("test");
    successCityWeather(data);
  });

add some error checking ... `ajax2.catch(function(err) { console.log(err); }).done(...your done function...);` — Jaromanda X, Nov 02 '15 at 08:10
Just sayin, `"?exclude=minutely" + "?units=si"` looks like an invalid URL part to me — Bergi, Nov 02 '15 at 13:06

score 1 · Answer 1 · answered Nov 02 '15 at 08:14

Your code use then and done. done is the old promises jQuery syntax so you should use only then.

The following code works for me :

$(function() {
  $.get('/test').then(function() {
    console.log('First request end');
    return $.get('/test');
  }).then(function() {
    console.log('second request end');  
  });
});

But in your case, maybe a one of your request fail. Give a second parameter to then to log the error :

$.getJSON('...').then(function(data) {
    console.log('success', data);
}, function(data) {
    console.log('fail', data);
});

score 0 · Answer 2 · answered Nov 02 '15 at 08:15

If not sure, always use always() handler. That way you will know if the request actually finished with error or not at all.

$.ajax( ...params... )
      .always(function(jqXHR, textStatus) {
            if (textStatus != "success") {
                  alert("Error: " + jqXHR.statusText); //error is always called .statusText
            } else {
                  alert("Success: " + jqXHR.response); //might not always be named .response
            }});

score 0 · Answer 3 · answered Nov 02 '15 at 08:24

0

$.post(jsonURL)
    .then(function (data) {
        var info = [];
        // some actions
        return $.getJSON(weatherApiUrl);
    })
    .then(function(data, status, promise) {
        // some actions
        successCityWeather(data);
    })

answered Nov 02 '15 at 08:24

JAYBEkster

780
1
6
19

3

What's the difference to the OPs code, and why does it matter? Please add an explanation to your answer. – Bergi Nov 02 '15 at 13:07

How to chain two ajax requests with promises

3 Answers3