Javascript: AJAX deferred

Javascript: AJAX deferred.js

/*
 * -------------------------
 * AJAX deferred: when, then
 * -------------------------
 */

// 1 пример
// Допустим нам нужно работать с результатами нескольких аякс запросов. Мы можем вэкономить время и вызывать их одновременно (параллельно)

$.when(
	$.get('1.json'), 
	$.get('2.json')
).then(function(r1, r2){
	console.log(r1[0].message + " " + r2[0].message);
});

// r1, r2 - это массивы (!), первые элементы которых содержат ответ сервера
// .then(doneHandler,failHandler,progressHandler)


// 2 пример
// Задача: отрисовать небольшой сайдбар с данными от 3х разных источников
// 
// anti-pattern:
// $.ajax({
// 	success: function () {
// 		$.ajax({
// 			$.ajax({
// 				// Don't do this, please
// 			})
// 		})
// 	}
// })
// 
// 
var getAddress = function () {
	return $.ajax({
		// returns a deferred
	});
}

var getTweets = function () {
	return $.ajax({

	});
}

var getFacebook = function () {
	return $.ajax({

	});
}

$.when(
	getAddress(),
	getTweets(),
	getFacebook()
).then(function () {
	// render sidebar
});


/*
 * -------------------------
 * AJAX deferred: done, fail
 * -------------------------
 */
function foo() {
    return $.ajax(...);
}

foo().done(function(result) {
    // code depending on result
}).fail(function() {
    // an error occurred
});



/*
 * -------------------------
 * How to return the response from an AJAX call?
 * -------------------------
 * http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call
 */
// Проблема
function foo() {
    var result;

    $.ajax({
        url: '...',
        success: function(response) {
            result = response;
            // return response; // <- tried that one as well
        }
    });

    return result;
}

var result = foo(); // always ends up being `undefined`.

// существует 2 решения:
// 1. сделать ajax синхронным (async: false) - но это жуткий костыль! К тому же, JSONP сделать синхронным нельзя по определению
// 2. реструктурировать код, чтобы правильно работать с callback'ами
// Вывод: надо учиться асинхронному программированию

// РЕШЕНИЕ ПРОБЕМЫ ПУТЁМ РЕСТРУКТУРИРОВАНИЯ КОДА
// 1. Передаём callback в функцию

function foo(callback) {
    $.ajax({
        // ...
        success: callback
    });
}

function myCallback(result) {
    // code that depends on `result`
}

foo(myCallback);



// дополнительно можно перед вызовом callback отфильтровать ответ
function foo(callback) {
    $.ajax({
        // ...
        success: function(response) {
            // e.g. filter the response
            callback(filtered_response);
        }
    });
}

// 2. Используем deferred object / promises
// AJAX метод jQuery уже возвращает объект PROMISE (!), который мы можем просто вернуть из функции

function foo() {
    return $.ajax(...);
}

foo().done(function(result) {
    // code depending on result
}).fail(function() {
    // an error occurred
});