Por todos es sabido que Js y yo somos vecinos pero ni hablamos del tiempo en el ascensor, algún día de estos tendremos que romper el hielo, y parece que esto es lo que en cierta forma ha ocurrido estos días.
Por otro lado, buscando sobre como realizar una llamada asíncrona no he encontrado nada, esto no quiere decir que no exista, puede ser que no haya realizado las preguntas correctas.
Y ahora, vamos con el agradecimiento, primero a Macarena Jiménez por sus recomendaciones de lecturas sobre async await, y javascript asíncrono, a Carlos Azaustre porque gracias a un vídeo suyo de youtube (Este) conseguí dar un pasito más en lo que estaba buscando, y a Tania Rascia porque esta entrada de su blog me termino de abrir el cielo.
Vamos a la chicha, imaginemos que tenemos un botón y cuando le pinchamos recuperamos información vía API ya sea de nuestro Drupal o de otra fuente, la cuestión (para los nóveles como yo en js) es que js es asíncrono y en vez de esperar a que se realice la llamada y se reciba la información, el código se sigue ejecutando, esto supone que puedes haber ejecutado todo tu código pero que no hayas terminado de recibir y procesar la llamada, por eso en js existen las promesas.
Vamos al código para entenderlo mejor.
// Nuestra petición ajax.
function ajaxCall() {
return new Promise((resolve, reject)=>{
$.ajax({
url: apiPath,
type: 'GET',
success: function(data) {
resolve(data);
},
error: function (error) {
reject(error);
}
})
});
}
Como explica Carlos en su vídeo y Tania en su post lo importante es que tenemos que devolver una promesa que es un tipo de objeto de js.
En mi caso a diferencia de la propuesta de Carlos o de Tania yo he usado $.when de jQuery para asegurarme de tener los datos de la llamada de Ajax antes de continuar.
function ejecutar(){
$.when(ajaxCall()).done(function(data){
// our code
}
}
Por último llamamos a la función ejecutar en un evento on.
$(".audiofield-player audio").on("play", function () {
let audioData = $(this).parents('.audiofield-player').attr('data-file');
ejecutar();
});
De esta manera podemos trabajar con peticiones ajax sin necesidad de poner un temporizador para asegurase de que se reciben los datos de la llamada.
En este snippets se aprecia mejor el código: