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.
- Documentación
Promise
- Diferencias entre callback y
Promise
- Un vídeo estupendo sobre la asincronía en Javascript. La call stack y el event loop.
- El mejor libro de Javascript que he tenido el gusto de leer.