Как избежать вложенных функций при использовании Ajax?
Последовательные Асинхронные вызовы грубы. Существует ли более читаемое решение?
Проблема, за этим трудно следовать:
ajaxOne(function() {
// do something
ajaxTwo(function() {
// do something
ajaxThree()
});
});
где анонимные функции являются обратными вызовами, которые называют на ответе сервера.
Я использую третье лицо API для совершения вызовов Ajax, таким образом, мне нужно универсальное решение.
3 ответа
функциональное программирование в помощь! jsdeferred позволяет написать пример следующим образом:
next(ajaxOne).next(ajaxTwo).next(ajaxThree).error(function(e){alert('An error happened:' + e)})
каждая из "последовательных" функций ajaxOne/Two/Three получает в качестве параметра возвращаемый результат своей предшественницы. Если вам нужно передать дополнительные параметры, вы можете раскрыть их в глобальном объекте перед вызовом вашей цепочки ajax.
Если у вас есть только одна вложенная функция, можно оставить ее как есть, но если у вас несколько вложенных вызовов, вам следует подумать о написании этих обратных вызовов в отдельном методе и вызове это из вложенной функции ...
ajaxOne(function(result) { handleAjaxOneCallback(result, someExtraNeededArg); } );
function handleAjaxOneCallback(result, someExtraNeededParam) {
// do something
ajaxTwo(function(result) { handleAjaxTwoCallback(result, myFoo, myBar); });
}
function handleAjaxTwoCallback(result, foo, bar) {
// do something
ajaxThree(/* ... */);
}
Если вам не нужна область закрытия в ваших обратных вызовах, чего, вероятно, не будет, вы можете просто поместить обратные вызовы в отдельные функции и вызвать их по их имени. например:
var ajaxOne = function() {
doTheAjax(callbackOne);
}
var callbackOne = function() {
//funny things ...
doTheAjax(callbackTwo);
}
var callbackTwo = function() {
//even more funny things ...
}