sábado, 28 de noviembre de 2020

Javascript: Ejemplo de asincronía, callbacks y promises

 Un ejemplo de código asíncrono es:

este código añade al array inicial tres números, el 4, el 5 y el 6. Estos números se añaden en un orden desconocido, el motivo es que la función addToArray hace uso de la función de javascript setTimeout. Esta función ejecuta el array.push después de un tiempo. En el caso del ejemplo el tiempo es elegido al azar por Math.random(). El resultado es que los elementos 4, 5 y 6 no se conoce de antemano en que orden apareceran. A cada ejecución el orden variará: [1, 2, 3, 5, 4, 6] o [1, 2, 3, 6, 4, 5] o cualquier otra combinación.

Utilizando callbacks esto se puede conseguir que los elementos se añadan en orden creciente siendo el resultado siempre [1, 2, 3, 4, 5, 6]. Esto se consigue con:

en este caso aunque addToArray sigue añadiendo los elementos en un tiempo indeterminado, se consigue que 4, 5 y 6 se añadan en el mismo orden siempre. Aquí la llamada a añadir el siguiente número es un callback del número anterior. Esto debido al funcionamiento interno de javascript que gestiona el orden en que se ejecutan las funciones con el stack queue y el callback queue hace que hasta que no se acaba de añadir el 4, no se añada el 5 y hasta que se acaba de añadir el 5 no se añada el 6. La importancia de esta técnica es conseguir sicronía cuando se necesita. Por ejemplo no mostrar una lista desplegable, mientras no tenemos disponibles los datos.

La técnica de callback, pronto se observó que conduce a un código no "limpio" (callback hell). Para evitar esto se ha incluido en javascript un objeto llamado Promise. Este objeto gestiona la asincronía. El ejemplo con Promise queda:

El método then del objeto promise hace que no se ejecute una función hasta que no haya terminado la anterior. Importante hacer notar que la función a controlar, en este caso addToArray debe devolver un objeto Promise para poder utilizar el método then.

Espero que este sencillo ejemplo le pueda ayudar a algún abnegado desarrollador para entender como funcionan las técnicas para manejar la asincronía intrinseca de javascript. 

Queda pendiente async-await para otro post.





No hay comentarios:

Publicar un comentario