Front End

9 mai, 2014

jQuery: múltiplas requisiçoes AJAX e JSON, um callback

Publicidade

Tenho trabalhado em uma nova feature para a Mozilla Developer Network que requer o carregamento de um jQuery.getScript e um jQuery.getJSON. Eu sei que ambos trabalham assincronamente e retornam um Deferred, então eu fiquei pensando se havia uma forma de carregá-los em paralelo com só uma chamada callback, mais ou menos da forma que o carregador JavaSript curljs faz. E eu tive sorte! Usando jQuery.when, eu posso carregar as duas requisições ao mesmo tempo com um callback!

O JavaScript jQuery

Como disse, meu caso de uso estava carregando um script e uma fonte JSON, e isso funciona assim:

$.when(
	$.getScript('/media/js/wiki-min.js?build=21eb633'), 
	$.getJSON('https://developer.mozilla.org/en-US/demos/feeds/json/featured/')
).then(function(a, b) {  // or ".done"

	// Yay, stuff loaded and now we can do something!

});

Quando os recursos estão carregando, o callback done ou then dispara e eu sei que a requisição está completa. Cada tipo de requisição provê um diferente objeto de argumento callback, então isso proveria:

// [response, state, jqxhr], [response, state, jqxhr]
["(function(c){var e=c(".from-search-navigate");if(e…;if(j){g.apply(m,l)}}}})(window,document,jQuery);", "success", Object]
[Array[15], "success", Object]

Se quisermos adicionar uma requisição AJAX XHR tradicional nessa mistura, como um widget ou template, podemos fazer também:

$.when(
	$.getScript('/media/js/wiki-min.js?build=21eb633'), 
	$.getJSON('https://developer.mozilla.org/en-US/demos/feeds/json/featured/'), 
	$.get('/')
).then(function(a, b, c) { 
	console.log(a, b, c); 
});

O Dojo Toolkit tem esse tipo de funcionalidade por um longo tempo já, mas eu estou bem animado que o jQuery moderno está seguindo para isso também. Hoje, fazer múltiplas requisições com um callback parece ser tão relevante como qualquer outro tipo de tarefa, então o jQuery está definitivamente no tempo certo!

***

Artigo traduzido pela Redação iMasters, com autorização do autor. Publicado originalmente em http://davidwalsh.name/jquery-ajax-callback