Propiedad async de Ajax jQuery

Por defecto, la propiedad está seteada a true, ¿qué significa esto? que todas las llamadas que hagamos serán asíncronas. Si queremos que no sean asíncronas y esperar que termine una para ejecutar la siguiente setearemos:

async: false

¿Qué es asíncono?
Según la wikipedia:

Asincronía hace referencia al suceso que no tiene lugar en total correspondencia temporal con otro suceso.

De un modo visual, para entenderlo mejor.
He preparado 4 llamadas tituladas «llamada-1, llamada-2… hasta 4»

En la primera prueba no tenemos seteada la propiedad async así que por defecto todas son true por lo tanto, se ejecutan todas a la vez:
02-todastrue

En la segunda las seteamos todas a false, aquí una espera que termine la anterior para ejecutarse:
01falseall

Seteamos la 3ª llamada a false, con lo cual, la 4ª llamada espera que termine la anterior:
03-3false

Seteamos la 1ª y la 3ª a false, con lo cual, la 2ª y la 4ª esperan que sus antecesoras terminen, la 3ª se ejecuta a la vez que la 2ª, ya que la 2ª es asíncrona:
04-1y3-false


Tu opinión es importante para mi, ¿Te ha resultado útil este artículo?

4 Comments

kike

Muchísimas gracias Ervin!!

Un placer que te haya servido de ayuda (:

¡Un saludo!

Reply
Ricardo

Hola una pregunta, si seteo async en false, la llamada espera a que la respuesta sea done para ejecutar una función por ejemplo?

Reply
kike

¡Hola Ricardo!

Te voy a contar unas cuantas formas de utilizarlo, algunas de ellas como verrás en código son más limpias que otras.

Forma 1: Ejecutas un console.log o una función al terminar la llamada. No olvides crear unas variables antes de la llamada para reasignarlas en el complete:

var ajaxResponse, ajaxStatus;
$.ajax({
    type: "GET",
    async: false,
    url: '/ejemplo.php',
    dataType: 'json',
    complete: function (jqXHR, status) {
        ajaxResponse = jqXHR
        ajaxStatus = status
    }
})

console.log('ajaxResponse:', ajaxResponse, 'ajaxStatus:', ajaxStatus)

Ejemplo 2, usando When and Then. En el Then ejecutamos lo que queramos que pase a continuación, en mi caso tan solo un console.log

$.when(
    $.ajax({
        type: "GET",
        async: false,
        url: '/ejemplo.php',
        dataType: 'json'
    })
).then(function(data, status, xhr) {
    console.log('data:', data, 'status:', status, 'xhr:', xhr)
});

Ejemplo 3. Encapsular la llamada en una función. Esto te permite que la variable «ejemploRespuesta» tenga el valor de la respuesta de la llamada.

function hacerLlamada(){
    var response;
    $.ajax({
        type: "GET",
        async: false,
        url: '/ejemplo.php',
        dataType: 'json',
        complete: function (jqXHR, status) {
            response = jqXHR;
        }
    })
    return response;

}

var ejemploRespuesta = hacerLlamada()

Ejemplo 3.1. ¡¡PELIGRO!! No olvides poner el return al final de la llamada. Fíjate, aquí el return está dentro del complete. En este caso tu respuesta ‘ejemploRespuesta’ será ‘undefined’. NO FUNCIONARÁ

function hacerLlamada(){

    $.ajax({
        type: "GET",
        async: false,
        url: '/ejemplo.php',
        dataType: 'json',
        complete: function (jqXHR, status) {
            return jqXHR;
        }
    })

}
var ejemploRespuesta = hacerLlamada()

Espero haberte aclarado la duda.

Gracias por escribir (:
¡Saludos!

Reply

Responder a ervin santos Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*