{"id":36774,"date":"2019-10-31T22:13:44","date_gmt":"2019-10-31T19:13:44","guid":{"rendered":"https:\/\/prohoster.info\/blog\/asinhronnoe-programmirovanie-v-javascript-callback-promise-rxjs\/"},"modified":"2019-10-31T22:13:44","modified_gmt":"2019-10-31T19:13:44","slug":"asinhronnoe-programmirovanie-v-javascript-callback-promise-rxjs","status":"publish","type":"post","link":"https:\/\/prohoster.info\/es\/blog\/news\/asinhronnoe-programmirovanie-v-javascript-callback-promise-rxjs","title":{"rendered":"Programaci\u00f3n as\u00edncrona en JavaScript. ( Callback, Promise, RxJs )","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

Hola a todos. Soy Sergey Omelnitsky. No hace mucho, realic\u00e9 una transmisi\u00f3n en vivo sobre programaci\u00f3n reactiva, donde habl\u00e9 sobre la asincron\u00eda en JavaScript. Hoy me gustar\u00eda resumir este material. <\/p>\n

<\/p>\n

\"Programaci\u00f3n<\/p>\n

<\/p>\n

Pero antes de comenzar con el material principal, necesitamos hacer una introducci\u00f3n. As\u00ed que, empecemos con definiciones: \u00bfqu\u00e9 es una pila y una cola?
\nPila <\/strong>es una colecci\u00f3n cuyos elementos se obtienen seg\u00fan el principio de \u00ab\u00faltimo en entrar, primero en salir\u00bb LIFO.
\nCola <\/strong>es una colecci\u00f3n cuyos elementos se obtienen seg\u00fan el principio de \u00abprimero en entrar, primero en salir\u00bb FIFO.<\/p>\n

<\/p>\n

Est\u00e1 bien, continuemos. <\/p>\n

<\/p>\n

\"Programaci\u00f3n<\/p>\n

<\/p>\n

JavaScript es un lenguaje de programaci\u00f3n de un solo hilo. Esto significa que tiene un solo hilo de ejecuci\u00f3n y una sola pila, en la cual se colocan las funciones en cola para su ejecuci\u00f3n. Por lo tanto, en un momento dado, JavaScript solo puede ejecutar una operaci\u00f3n, las otras operaciones esperar\u00e1n su turno en la pila hasta que sean llamadas. <\/p>\n

<\/a><\/noindex><\/p>\n

Pila de llamadas<\/strong> es una estructura de datos que, simplificando, registra informaci\u00f3n sobre el lugar en el programa donde nos encontramos. Si entramos en una funci\u00f3n, colocamos un registro de ella en la parte superior de la pila. Cuando regresamos de la funci\u00f3n, sacamos el elemento m\u00e1s alto de la pila y retornamos al punto donde se llam\u00f3 a esa funci\u00f3n. Eso es todo lo que puede hacer una pila. Y ahora surge una pregunta muy interesante. \u00bfC\u00f3mo funciona entonces la asincron\u00eda en JavaScript?<\/p>\n

<\/p>\n

\"Programaci\u00f3n<\/p>\n

<\/p>\n

En realidad, adem\u00e1s de la pila, en los navegadores hay una cola especial para trabajar con lo que se llama WebAPI. Las funciones de esta cola se ejecutan en orden solo despu\u00e9s de que la pila est\u00e9 completamente vac\u00eda. Solo despu\u00e9s de eso se trasladan de la cola a la pila para su ejecuci\u00f3n. Si en la pila hay al menos un elemento, no pueden entrar en la pila. Precisamente por eso, la llamada a funciones con timeout a menudo no es precisa en el tiempo, ya que una funci\u00f3n no puede pasar de la cola a la pila mientras esta est\u00e9 ocupada. <\/p>\n

<\/p>\n

Veamos el siguiente ejemplo y abordemos su \u00abejecuci\u00f3n\u00bb paso a paso. Tambi\u00e9n analicemos qu\u00e9 sucede en el sistema en ese momento.<\/p>\n

<\/p>\n

console.log('Hi);\nsetTimeout(function cb1() {\n    console.log('cb1');\n}, 5000);\nconsole.log('Bye');<\/code><\/pre>\n
<\/p>\n
\"Programaci\u00f3n<\/p>\n
<\/p>\n
1) Por ahora, no sucede nada. La consola del navegador est\u00e1 limpia, y la pila de llamadas est\u00e1 vac\u00eda.<\/p>\n
<\/p>\n
\"Programaci\u00f3n<\/p>\n
<\/p>\n
2) Luego, el comando console.log('Hi') se a\u00f1ade a la pila de llamadas.<\/p>\n
<\/p>\n
\"Programaci\u00f3n<\/p>\n
<\/p>\n
3) Y se ejecuta.<\/p>\n
<\/p>\n
\"Programaci\u00f3n<\/p>\n
<\/p>\n
4) A continuaci\u00f3n, console.log('Hi') se elimina de la pila de llamadas.<\/p>\n
<\/p>\n
\"Programaci\u00f3n<\/p>\n
<\/p>\n
5) Ahora pasamos al comando setTimeout(function cb1() {\u2026 }). Este se a\u00f1ade a la pila de llamadas.<\/p>\n
<\/p>\n
\"Programaci\u00f3n<\/p>\n
<\/p>\n
6) El comando setTimeout(function cb1() {\u2026 }) se ejecuta. El navegador crea un temporizador, que es parte de la API web. Este har\u00e1 una cuenta regresiva.<\/p>\n
<\/p>\n
\"Programaci\u00f3n<\/p>\n
<\/p>\n
7) El comando setTimeout(function cb1() {\u2026 }) ha terminado y se elimina de la pila de llamadas.<\/p>\n
<\/p>\n
\"Programaci\u00f3n<\/p>\n
<\/p>\n
8) El comando console.log('Bye') se a\u00f1ade a la pila de llamadas.<\/p>\n
<\/p>\n
\"Programaci\u00f3n<\/p>\n
<\/p>\n
9) El comando console.log('Bye') se ejecuta.<\/p>\n
<\/p>\n
\"Programaci\u00f3n<\/p>\n
<\/p>\n
10) El comando console.log('Bye') se elimina de la pila de llamadas.<\/p>\n
<\/p>\n
\"Programaci\u00f3n<\/p>\n
<\/p>\n
11) Despu\u00e9s de al menos 5000 ms, el temporizador termina y coloca el callback cb1 en la cola de callbacks.<\/p>\n
<\/p>\n
\"Programaci\u00f3n<\/p>\n
<\/p>\n
12) El ciclo de eventos toma la funci\u00f3n cb1 de la cola de callbacks y la coloca en la pila de llamadas.<\/p>\n
<\/p>\n
\"Programaci\u00f3n<\/p>\n
<\/p>\n
13) La funci\u00f3n cb1 se ejecuta y a\u00f1ade console.log('cb1') a la pila de llamadas.<\/p>\n
<\/p>\n
\"Programaci\u00f3n<\/p>\n
<\/p>\n
14) El comando console.log('cb1') se ejecuta.<\/p>\n
<\/p>\n
\"Programaci\u00f3n<\/p>\n
<\/p>\n
15) El comando console.log('cb1') se elimina de la pila de llamadas.<\/p>\n
<\/p>\n
\"Programaci\u00f3n<\/p>\n
<\/p>\n
16) La funci\u00f3n cb1 se elimina de la pila de llamadas.<\/p>\n
<\/p>\n
Veamos un ejemplo en din\u00e1mica:<\/p>\n
<\/p>\n
\"Programaci\u00f3n<\/p>\n
<\/p>\n
Ya hemos discutido c\u00f3mo se implementa la asincron\u00eda en JavaScript. Ahora hablemos brevemente sobre la evoluci\u00f3n del c\u00f3digo as\u00edncrono.<\/p>\n
<\/p>\n
Evoluci\u00f3n del c\u00f3digo as\u00edncrono.<\/h2>\n
<\/p>\n
a(function (resultsFromA) {\n    b(resultsFromA, function (resultsFromB) {\n        c(resultsFromB, function (resultsFromC) {\n            d(resultsFromC, function (resultsFromD) {\n                e(resultsFromD, function (resultsFromE) {\n                    f(resultsFromE, function (resultsFromF) {\n                        console.log(resultsFromF);\n                    })\n                })\n            })\n        })\n    })\n});<\/code><\/pre>\n
<\/p>\n
La programaci\u00f3n as\u00edncrona, tal como la conocemos en JavaScript, solo puede ser implementada mediante funciones. Estas pueden ser pasadas como cualquier otra variable a otras funciones. As\u00ed nacieron los callbacks. Y esto es genial, divertido y entretenido, hasta que se convierte en tristeza, melancol\u00eda y pena. \u00bfPor qu\u00e9? Pues por algo simple:<\/p>\n
<\/p>\n