-
-
Save andrIvash/b563a9f653726ab0544f to your computer and use it in GitHub Desktop.
Javascript: AJAX deferred
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* ------------------------- | |
* 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 | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment