jQuery - .always() callback firing too soon

Question

I'm working on a client-side JS app which is supposed to read a CSV file, make a few API calls per row, then write the results back out to CSV. The part I'm stuck on is how to orchestrate the requests and fire off a function when all are complete. This is what I have so far:

var requests = [];

// loop through rows
addresses.forEach(function (address, i) {
    // make request
    var addressRequest = $.ajax({
            dataType: 'json',
            url: 'http://api.com/addresses/' + address,
            success: function (data, textStatus, jqXhr) { APP.didGetAddressJson(data, i, jqXhr) },
            error: function (jqXhr, textStatus, errorThrown) { APP.didFailToGetAddressJson(errorThrown, i) },
        });
    requests.push(addressRequest);

    // make some more requests (handled by other success functions)
});

// leggo
$.when.apply($, requests).done(APP.didFinishGeocoding);

The problem is that if one of the rows throws a 404 the done function isn't called. I switched it to always and now it's getting called, but not at the end -- it's usually somewhere in the middle if I log the execution of each callback to the console. However, if I edit the CSV so there are no errors it gets called at the end as expected. Am I doing something here that's allowing the always to fire early?

Update: could it just be that the console's logging it out of order?

Answer 1

You need to prevent error(s) sending the promise returned by $.when.apply($, requests) down the error path.

This can be achieved by :

• chaining .then() to your $.ajax() calls, rather than specifying "success" and "error" handlers as $.ajax() options.
• handling errors by converting to success (as this is jQuery, you have to return a resolved promise from the error handler).

This approach also allows you to control the data that's eventually delivered to APP.didFinishGeocoding()

With a few assumptions, the general shape of your code should be as follows :

function foo () {//assume there's an outer function wrapper 
    var errorMarker = '**error**';

    var requests = addresses.map(function (address, i) {
        return $.ajax({
            dataType: 'json',
            url: 'http://api.com/addresses/' + address
        }).then(function (data, textStatus, jqXhr) { //success handler
            return APP.didGetAddressJson(data, i, jqXhr); //whatever APP.didGetAddressJson() returns will appear as a result at the next stage.
        }, function (jqXhr, textStatus, errorThrown) { // error handler
            APP.didFailToGetAddressJson(errorThrown, i);
            return $.when(errorMarker);//errorMarker will appear as a result at the next stage - but can be filtered out.
        });
        // make some more requests (handled by other success functions)
    });

    return $.when.apply($, requests).then(function() {
        //first, convert arguments to an array and filter out the errors
        var results = Array.prototype.slice.call(arguments).filter(function(r) {
            return r !== errorMarker;
        });

        //then call APP.didFinishGeocoding() with the filtered results as individual arguments.
        return APP.didFinishGeocoding.apply(APP, results);

        //alternatively, call APP.didFinishGeocoding() with the filtered results as an array.
        //return APP.didFinishGeocoding(results);
    });
}

Tweak as necessary.

Answer 2

Try passing both resolved , rejected jQuery promise object through a whenAll function , filtering resolved, rejected promise object within .then() at completion of whenAll . See also Jquery Ajax prevent fail in a deferred sequential loop

---

(function ($) {
    $.when.all = whenAll;
    function whenAll(arr) {
        "use strict";
        var deferred = new $.Deferred(),
            args = !! arr 
                   ? $.isArray(arr) 
                     ? arr 
                     : Array.prototype.slice.call(arguments)
                       .map(function (p) {
                         return p.hasOwnProperty("promise") 
                         ? p 
                         : new $.Deferred()
                           .resolve(p, null, deferred.promise())
                       }) 
                   : [deferred.resolve(deferred.promise())],
            promises = {
                "success": [],
                  "error": []
            }, doneCallback = function (res) {
                promises[this.state() === "resolved" 
                         || res.textStatus === "success" 
                         ? "success" 
                         : "error"].push(res);
                return (promises.success.length 
                       + promises.error.length) === args.length 
                       ? deferred.resolve(promises) 
                       : res
            }, failCallback = function (res) {
                // do `error` notification , processing stuff
                // console.log(res.textStatus);
                promises[this.state() === "rejected" 
                        || res.textStatus === "error" 
                        ? "error" 
                        : "success"].push(res);
                return (promises.success.length 
                       + promises.error.length) === args.length 
                       ? deferred.resolve(promises) 
                       : res
            };
        $.map(args, function (promise, index) {
            return $.when(promise).always(function (data, textStatus, jqxhr) {
                return (textStatus === "success") 
                    ? doneCallback.call(jqxhr, {
                        data: data,
                        textStatus: textStatus 
                                    ? textStatus 
                                    : jqxhr.state() === "resolved" 
                                      ? "success" 
                                      : "error",
                        jqxhr: jqxhr
                      }) 
                    : failCallback.call(data, {
                        data: data,
                        textStatus: textStatus,
                        jqxhr: jqxhr
                      })
            })
        });
        return deferred.promise()
    };
}(jQuery));

---

e.g

var request = function (url) {
    return $.ajax({
                   url: "http://api.com/addresses/" + url, 
                   dataType: "json"
           })
    }
, addresses = [
    ["/echo/json/"], // `success`
    ["/echo/jsons/"], // `error`
    ["/echo/json/"], // `success`
    ["/echo/jsons/"], // `error`
    ["/echo/json/"] // `success`
];

$.when.all(
  $.map(addresses, function (address) {
    return request(address)
  })
)
.then(function (data) {
    console.log(data);
    // filter , process responses
    $.each(data, function(key, value) {
        if (key === "success") {
           value.forEach(function(success, i) {
              console.log(success, i);
              APP.didGetAddressJson(success.data, i, success.jqxhr);
            })
        } else {            
           value.forEach(function(error, i) {
              console.log(error, i);
              APP.didFailToGetAddressJson(error.jqxhr, i)
          })
        }
    })
}, function (e) {
    console.log("error", e)
});

jsfiddle http://jsfiddle.net/guest271314/ev4urod1/