jquery - сериализация вызовов ajax с WHEN и DONE

Question

У меня есть несколько методов ajax, и я хочу выполнить некоторый код после успешного завершения всех этих вызовов ajax. Я не могу изменить или переопределить методы ajax. Пожалуйста, дайте мне знать, как этого достичь.

Я попытался с WHEN но дозвонились сразу и не дожидаясь, все вызовы будут завершены. (Как было предложено после того, как я добавил возвращение в loadData1(), он работает отлично.)

Теперь мой проблема в том, что если какой-либо запрос (loadData1() или loadData2()) имеет ошибку, тогда «then()» не выполняется. Пожалуйста, дайте мне знать, как этого добиться.

var load1 = loadData1(); 
var load2 = loadData2(); 
var load3 = loadData3(); 
var load4 = loadData4(); 

$.when(load1, load2, load3,load4).then(function() { 
     console.log("All done"); 
}); 

function loadData1() { 
    return $.getJSON("http://10.1.2.3/cgi-bin/GetData1.cgi", function (data) { 
     console.log(data); 
    }); 
} 

Благодаря

Answer 1

Вы можете использовать функцию как

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

function second(data, textStatus, jqXHR) { 
    return $.ajax(...); 
} 

function third(data, textStatus, jqXHR) { 
    return $.ajax(...); 
} 

function main() { 
    first().then(second).then(third); 
} 

проверки этого более подробно jquery-promises

Answer 2

Попробуйте

var promise = loadData1(); 


var load2 = loadData2(); 
var load3 = loadData3(); 
var load4 = loadData4(); 

promise.then(loadData2).then(loadData3).then(loadData4).then(function (E) { 
         // 
        }); 

function loadData1() { 
    $.getJSON("http://10.1.2.3/cgi-bin/GetData1.cgi", function (data) { 
     console.log(data); 
    }); 

var deferred = new $.Deferred(); 
    deferred.resolve(); 
    return deferred.promise(); 
} 

Answer 3

Вы должны верните что-то в свои функции. Это первое. Второй, когда вы ждете, вы должны ждать результатов функций, поэтому вместо load1, load2, load3, load4 используйте load1(), load2(), load3(), load4().

Ниже приведен пример моделирования 4 отложенных функций (ваши запросы ajax).

// load1, load2, load3, load4 are defined to simulate promises and some work behind it 
 

 
// here is var load1 = loadData1(); 
 
var load1 = function() { 
 
    return $.Deferred(function(defer) { 
 
     setTimeout(function() { 
 
      $('#log').append('<div>loadData1()</div>'); 
 
      defer.resolve(); 
 
     }, 150); 
 
    }); 
 
} 
 

 
// here is var load2 = loadData2(); 
 
var load2 = function() { 
 
    return $.Deferred(function(defer) { 
 
     setTimeout(function() { 
 
      $('#log').append('<div>loadData2()</div>'); 
 
      defer.resolve(); 
 
     }, 600); 
 
    }); 
 
} 
 

 
// here is var load3 = loadData3(); 
 
var load3 = function() { 
 
    return $.Deferred(function(defer) { 
 
     setTimeout(function() { 
 
      $('#log').append('<div>loadData3()</div>'); 
 
      defer.resolve(); 
 
     }, 300); 
 
    }); 
 
} 
 

 
// here is var load4 = loadData4(); 
 
var load4 = function() { 
 
    return $.Deferred(function(defer) { 
 
     setTimeout(function() { 
 
      $('#log').append('<div>loadData4()</div>'); 
 
      defer.resolve(); 
 
     }, 200); 
 
    }); 
 
} 
 

 

 
$(document).ready(function() { 
 
    $.when(load1(), load2(), load3(), load4()) 
 
     .then(function() { 
 
      $('#log').append('<div>All done.</div>'); 
 
     }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="log"></div>

Answer 4

Вы можете попробовать использовать функцию полезности как

function allCompleted(array) { 
    var deferred = jQuery.Deferred(), 
    counter = array.length, 
    results = []; 
    $.each(array, function(i, item) { 
    item.always(function() { 
     results[i] = [].slice.call(arguments, 0) 
     if (--counter == 0) { 
     deferred.resolveWith(undefined, results); 
     } 
    }); 
    }); 
    return deferred.promise(); 
} 

затем

var load1 = loadData1(); 
var load2 = loadData2(); 
var load3 = loadData3(); 
var load4 = loadData4(); 

allCompleted([load1, load2, load3,load4]).then(function() { 
     console.log("All done"); 
}); 

Демо: Fiddle