Skip to main content
Respuesta al OP
Origen Enlace
VRoxa
  • 3.1k
  • 8
  • 19

Edit II

¿Por qué otras llamadas a ajax funcionan y esta en concreto no lo hacía?

La sutil diferencia está en cómo tratas la respuesta y qué haces con ella. Supongamos el siguiente caso.

const ajaxCall = data => {
    $.ajax({
        type: `POST`,
        url: `http://example.com`,
        data,
        success: console.log,
        error: console.error
    });
}

Esta llamada hace una request por ajax y lo único que hace es imprimir la respuesta una vez la obtiene, o imprime el error, si hubo.
Si llamamos a esta función

ajaxCall(`some data`);

Imprime el resultado de la petición un tiempo después. Supongamos que el resultado es el siguiente

AJAX result

¿Qué pasa si esperamos que nos devuelva algo?

const r = ajaxCall(`some data`);
console.log(r);

const r = ajaxCall(`some data`);
console.log(r);

// undefined
// AJAX result

La función retorna undefined (bueno, no es nada extraño porque no tenemos ningún return en la función ajaxCall). Pero vemos que primero ha retornado el undefined y después se ha llamado al console.log con la respuesta.

Vamos a poner un return a la función una vez tenemos los datos.

const ajaxCall = data => {
    $.ajax({
        type: `POST`,
        url: `http://example.com`,
        data,
        success: response => {
            return response;
        },
        error: console.error
    });
}

const r = ajaxCall(`some data`);
console.log(r);

// undefined

Y devuelve exactamente lo mismo, un undefined.

La propiedad success del objeto que le pasamos como argumento a la función ajax es una función, una callback. Esta función se ejecutará una vez ajax haya acabado con su trabajo.
Importante, de nuevo, es una función. Por lo que el return dentro de esta función afecta a ésta misma, no a la función ajaxCall.
La función ajaxCall no tiene ningún return explícito.

Con el siguiente ejemplo,

const fn = () => {
    const innerFn = n => {
        return n * 2;
    }

    const r = innerFn(3);
    return r * 2;
}

const r = fn();
console.log(r); // 12

... se obvia esto. El return dentro de innerFn afecta a innerFn, no a fn.

Cuando una función no tiene un return, Javascript lo interpreta como un return undefined; implícito.

const fn1 = () => {
    console.log(`Calling fn ...`);
    return;
}

const fn2 = () => {
    console.log(`Calling fn ...`);
}

fn1 y fn2 son exactamente iguales.

Resumiendo, ¿por qué es diferente una llamada a ajax de otra?
Va a depender de si esa función devuelve o no valores. Si todo lo que hace con la respuesta de ajax se hace en la misma success, no hace falta implementar ningún patrón de Promise (aunque implíticamente ajax sí lo hace por dentro).
Si necesitas que esa función devuelva algo, como era tu caso, deberás implementar las Promise para que des de fuera puedas esperar también a esa respuesta.


Para que no quede nada sin atar, para emular las llamadas ajax he usado lo siguiente.

const delay = millis => 
    new Promise(resolve => {
        setTimeout(resolve, millis);
    });

const ajax = async ({ type, url, data, success, error }) => {
    try {
        await delay(1000);
        success(`AJAX result`);
    } catch (e) {
        error(e);
    }
}

const $ = { ajax };

Doy por respondida la pregunta. Si tienes otro tipo de dudas o errores, te sugiero que escribas otra pregunta diferente.
También te animo a leer la documentación y algunos artículos interesantes sobre la asincronicidad en Javascript.


Edit II

¿Por qué otras llamadas a ajax funcionan y esta en concreto no lo hacía?

La sutil diferencia está en cómo tratas la respuesta y qué haces con ella. Supongamos el siguiente caso.

const ajaxCall = data => {
    $.ajax({
        type: `POST`,
        url: `http://example.com`,
        data,
        success: console.log,
        error: console.error
    });
}

Esta llamada hace una request por ajax y lo único que hace es imprimir la respuesta una vez la obtiene, o imprime el error, si hubo.
Si llamamos a esta función

ajaxCall(`some data`);

Imprime el resultado de la petición un tiempo después. Supongamos que el resultado es el siguiente

AJAX result

¿Qué pasa si esperamos que nos devuelva algo?

const r = ajaxCall(`some data`);
console.log(r);

const r = ajaxCall(`some data`);
console.log(r);

// undefined
// AJAX result

La función retorna undefined (bueno, no es nada extraño porque no tenemos ningún return en la función ajaxCall). Pero vemos que primero ha retornado el undefined y después se ha llamado al console.log con la respuesta.

Vamos a poner un return a la función una vez tenemos los datos.

const ajaxCall = data => {
    $.ajax({
        type: `POST`,
        url: `http://example.com`,
        data,
        success: response => {
            return response;
        },
        error: console.error
    });
}

const r = ajaxCall(`some data`);
console.log(r);

// undefined

Y devuelve exactamente lo mismo, un undefined.

La propiedad success del objeto que le pasamos como argumento a la función ajax es una función, una callback. Esta función se ejecutará una vez ajax haya acabado con su trabajo.
Importante, de nuevo, es una función. Por lo que el return dentro de esta función afecta a ésta misma, no a la función ajaxCall.
La función ajaxCall no tiene ningún return explícito.

Con el siguiente ejemplo,

const fn = () => {
    const innerFn = n => {
        return n * 2;
    }

    const r = innerFn(3);
    return r * 2;
}

const r = fn();
console.log(r); // 12

... se obvia esto. El return dentro de innerFn afecta a innerFn, no a fn.

Cuando una función no tiene un return, Javascript lo interpreta como un return undefined; implícito.

const fn1 = () => {
    console.log(`Calling fn ...`);
    return;
}

const fn2 = () => {
    console.log(`Calling fn ...`);
}

fn1 y fn2 son exactamente iguales.

Resumiendo, ¿por qué es diferente una llamada a ajax de otra?
Va a depender de si esa función devuelve o no valores. Si todo lo que hace con la respuesta de ajax se hace en la misma success, no hace falta implementar ningún patrón de Promise (aunque implíticamente ajax sí lo hace por dentro).
Si necesitas que esa función devuelva algo, como era tu caso, deberás implementar las Promise para que des de fuera puedas esperar también a esa respuesta.


Para que no quede nada sin atar, para emular las llamadas ajax he usado lo siguiente.

const delay = millis => 
    new Promise(resolve => {
        setTimeout(resolve, millis);
    });

const ajax = async ({ type, url, data, success, error }) => {
    try {
        await delay(1000);
        success(`AJAX result`);
    } catch (e) {
        error(e);
    }
}

const $ = { ajax };

Doy por respondida la pregunta. Si tienes otro tipo de dudas o errores, te sugiero que escribas otra pregunta diferente.
También te animo a leer la documentación y algunos artículos interesantes sobre la asincronicidad en Javascript.

Origen Enlace
VRoxa
  • 3.1k
  • 8
  • 19

Si quieres usar los datos de la llamada de ajax deberás hacerlo con Promise en vez de la clásica success/error.

Y es que ajax devuelve una Promise que podrás esperar a que se resuelva y propagar.

function ajaxCall(dni_a_verificar)
{
    return $.ajax({
            type: 'POST',
            url: 'validacion.php',
            data: 'dni_existe=' + dni_a_verificar
    });
}

Aquí se hace la llamada a ajax. Sin las propiedades success ni error, ya que las respuestas las esperaremos des de fuera.

function existe_dni(dni_a_verificar) {
    return ajaxCall(dni_a_verificar)
            .then(html => {
                var validacion = $.parseJSON(html);
                console.log("DNI: " + dni_a_verificar + " (" + typeof(dni_a_verificar) + ")");
                console.log("Validacion: " + validacion + " (" + typeof(validacion) + ")");
                console.log("");
                return validacion;
            })
            .catch(e => e);
}

Esta función llama a la anterior ajaxCall. Dentro de la función then estará la respuesta sin errores. El catch se invocará en caso que la llamada haya tenido algún tipo de error.
Esta función, existe_dni también devolverá una Promise. El resultado de esta será la variable validacion en caso de que la llamada ajax haya ido bien. En caso de error, sólo eleva la excepción hacia arriba.

Por último,

// ...
else {
    existe_dni(dni)
        .then(existe_el_dni => {
            console.log("(if) DNI: " + dni + " (" + typeof(dni) + ")");
            console.log("(if) Existe? " + existe_el_dni);
        })
        .catch(e => {
            console.error(e);
            dni_ctl.style.borderColor = "red";
            errores_personal_cnt++;
            errores_personal += "\t- el D.N.I. ya existe\n";
        })
}

Aquí, de nuevo, llamaremos a existe_dni pero nos suscribiremos a la respuesta. La respuesta, obviamente será la variable validación en caso de que haya ido bien, y el error lo obtendremos dentro de la función catch.

Esto de puede refactorizar de mil formas más elegantes. Pero creo que esta, para empezar, es una forma fácil de entenderlo.


Edit
Con uso de async/await quedaría así.

async function existe_dni(dni_a_verificar)
{
    try {
        const html = await $.ajax({
            type: 'POST',
            url: 'validacion.php',
            data: 'dni_existe=' + dni_a_verificar
        });

        var validacion = $.parseJSON(html);
        console.log("DNI: " + dni_a_verificar + " (" + typeof(dni_a_verificar) + ")");
        console.log("Validacion: " + validacion + " (" + typeof(validacion) + ")");
        console.log("");
        return validacion;
    } catch (e) {
        throw e;
    }
}

La llamada a existe_dni quedaría igual, con los métodos then y catch.

Espero que sirva.