Deferred - Chaining - And Error Handling

by bizamajig

HTML

<div id="output"></div>

JavaScript

var arrValues = [
    "http://fiddle.jshell.net/",
    "http://xfiddle.jshell.net/",
    "http://fiddle.jshell.net/"
];

function step(i) {
	return function() {
		var url = arrValues[i];
		log('Starting: ' + url + i);
		return $.ajax(url).done(function(data, textStatus, jqXHR) {
			log(textStatus + ' ' + url + i + ' Done');
		}).fail(function(jqXHR, textStatus, errorThrown) {
			log(textStatus + ' ' + url + i + ' Failed');
		});
	}
};

function log(message) {
    $("#output").append($("<div/>").text(message));
}

log("Starting To Build Report");

var p = $.Deferred().resolve().promise();
$.each(arrValues, function(i, url) {
	p = p.then(step(i));
});
p.done(function() {
    log("The process completed successfully");
}).fail(function() {
    log("One of the steps failed");
}).always(function() {
    log("End of process");
});