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
.
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.
Espero que sirva.