Sincronizar llamadas Ajax con Jquery

Recientemente tuve un problema realizando peticiones AJAX con Jquery, tenía que hacer 4 llamadas y después ejecutar cierto código en el método ‘done’.

El problema estaba en que necesitaba que se ejecutaran todas las llamadas antes de ejecutar el código.

Veamos cómo sincronizar estas llamadas:

Primero crearemos una función que será la encargada de hacer la petición.

function ajaxGet(url){
     return $.ajax({
	url: url,
	type: "get",
	data:{},
	success: function(response) {
	   	//código
	}
     });
}

Como se puede observar, devolvemos un objeto Ajax de Jquery.

Ahora hacemos distintas llamadas:

var url1 = "url1";
$ajax1 = ajaxGet(rul1);

var url2 = "url2";
$ajax2 = ajaxGet(url2);

var url3 = "url3";
$ajax3 = ajaxGet(url3);

Una vez hechas las llamadas, ejecutaremos el código que queremos una vez que hayan finalizado, se hará de la siguiente manera:

$.when($ajax1, $ajax2, $ajax3).done(function(){
	//mi código
});

De esta sencilla manera, ejecutaremos el código cuando las 3 peticiones se hayan completado.

Para cualquier duda no dudes en comentarnos.

HackSaludos!

• JavaScript