Post Top Ad

Your Ad Spot

lunes, 29 de junio de 2020

JavaScript Callbacks vs Promises vs Async Await

JavaScript es un poderoso lenguaje de programación con su capacidad de cierre, funciones de primera clase y muchas otras características. JavaScript se usa a menudo para la programación asincrónica, o la programación en un estilo que utiliza devoluciones de llamada. Si bien es poderoso, esto puede conducir a lo que muchos ahora llaman Callback Hell . Callback hell también se conoce cariñosamente como Pyramid Of Doom gracias a los muchos niveles de sangría que hacen que su código parezca una pirámide difícil de leer. Repasemos la evolución de la programación asincrónica en JavaScript desde devoluciones de llamada a asíncrono / espera, ya que esto nos ayudará en nuestra programación de Node.js.

¿Para qué se utilizan las devoluciones de llamada de JavaScript?

Las funciones de devolución de llamada en JavaScript son funciones que se pueden pasar a otras funciones como un parámetro. También se conocen como funciones de orden superior y se llaman (o ejecutan) dentro de la función a la que se les pasó. Una devolución de llamada es una convención, no una cosa real en el lenguaje JavaScript. Las devoluciones de llamada se usan cuando necesita hacer cosas en su código que resultan en E / S o operaciones de entrada / salida. Cosas como hablar con una base de datos, descargar una foto o escribir un archivo en el disco son ejemplos de operaciones de E / S. Estas son operaciones asincrónicas. En otras palabras, pueden tomar un tiempo o suceder en el futuro. Echa un vistazo a una función de devolución de llamada de ejemplo .
Veamos un ejemplo de código aquí.
¿Qué crees que sucederá cuando se ejecute este código? Veamos.
express-rest $ nodo index.js
C: \ nodo \ express-rest \ index.js: 21
console.log (blogpost.title);
                     ^

TypeError: no se puede leer la propiedad 'title' de undefined
    en el objeto (C: \ nodo \ express-rest \ index.js: 21: 22)
    en Module._compile (module.js: 643: 30)
    en Object.Module._extensions..js (module.js: 654: 10)
    en Module.load (module.js: 556: 32)
    en tryModuleLoad (module.js: 499: 12)
    en Function.Module._load (module.js: 491: 3)
    en Function.Module.runMain (module.js: 684: 10)
    al inicio (bootstrap_node.js: 187: 16)
    en bootstrap_node.js: 608: 3
La aplicación dice que no puede leer una propiedad de indefinido. ¿Pero por qué? JavaScript no espera a que se complete la operación asíncrona para seguir avanzando en la ejecución del código. Simplemente ejecuta cada línea del programa sin parar. En otras palabras, no es bloqueo. La función getBlogPost () se ejecuta inmediatamente y establece el valor de blogpostindefinido. Es por eso que se necesitan devoluciones de llamada al programar JavaScript y Node. Podemos reescribir este ejemplo usando una devolución de llamada para obtener el resultado que queremos.
devolución de llamada js en acción
Esto está más en la línea de lo que estamos buscando. Iniciamos el programa, y ​​después de 2 segundos vemos la salida en la pantalla.

Callback Hell

Pensemos en una situación que podría causar un infierno de devolución de llamada. Imagine en su aplicación que le gustaría obtener un usuario de la base de datos. Una vez que tenga ese usuario, ahora desea obtener todas las publicaciones de blog de ese usuario. Una vez que tenga las publicaciones del blog, también desea obtener los comentarios de esa publicación del blog. En un enfoque sincrónico, esto es bastante sencillo. En el mundo asincrónico, esto puede comenzar a causar algunos problemas. ¡El código resaltado aquí es lo que llamamos Pyramid Of Doom ! También podría llamarlo infierno de devolución de llamada, pero la pirámide de la fatalidad suena tan asesina, ¡jaja!
Este código funciona, pero no es tan fácil de leer ni de mirar. Peor aún, si sigue sangrando más niveles de devoluciones de llamada, seguramente se perderá en el código, creará errores y simplemente creará patrones anti que no son buenos para usted.
pirámide de la fatalidad todavía funciona

Reducción del infierno de devolución de llamada con funciones con nombre

JavaScript te facilita dispararte en el pie si no tienes cuidado. Una de las características del lenguaje que le ayuda a hacer esto son las funciones anónimas. Getify es conocido por sugerir que siempre nombres tus funciones y él tiene un punto. La depuración de funciones anónimas es casi imposible. En cualquier caso, modifiquemos nuestro código hasta ahora para usar funciones con nombre y veamos cómo eso ayuda a la legibilidad. Aquí refactorizamos el código para usar funciones con nombre. Es mejor, pero aún no es tan bueno.

Cómo pueden ayudar las promesas de JavaScript

Las promesas contienen el resultado eventual de una operación asincrónica. Cuando se completa una operación asincrónica, puede generar un valor o un error. Los tres estados que puede cumplir una promesa son Pendiente, Cumplido o Rechazado. Aquí hay un ejemplo ficticio del uso de una promesa para realizar una solicitud de API.
Cuando la solicitud de API fue exitosa (apiResponse = 1), todo está bien.
resolver promesa
Cuando la solicitud de API no tuvo éxito (apiResponse = 0), el .catch de la cadena de promesa muestra un error.
rechazar promesa
Con este entendimiento, ahora podemos reemplazar las funciones asincrónicas que toman una devolución de llamada, con una promesa devuelta. A ver cómo.

Promesas en lugar de devoluciones de llamada

En el código de ejemplo que mostramos para el infierno de devolución de llamada, tenemos la estructura de la pirámide de la fatalidad. En otras palabras, tenemos ese problema profundamente anidado que es difícil de leer. Aquí, podemos modificar las funciones asincrónicas para que ahora devuelvan una promesa. Dado que esas funciones asíncronas devuelven una promesa, podemos consumir esas promesas usando .then () y .catch () eliminando así la pirámide anidada del infierno de devolución de llamada. Tenga en cuenta que la pirámide de la fatalidad ahora está comentada y reescrita usando una cadena .then () justo debajo. También tenga en cuenta que las funciones asíncronas compatibles ya no aceptan una devolución de llamada como parámetro, ya que ahora están devolviendo una Promesa. Con suerte, está claro que dentro de la promesa devuelta es donde va ahora el código asíncrono (leer una base de datos o hacer una solicitud de API).

Asíncrono aguarda azúcar sintáctico

Finalmente, puede considerar usar la solución más nueva para devolver la llamada al infierno, y eso sería asíncrono / esperar . El objetivo de async / await es ayudar a los desarrolladores de software a escribir código asincrónico como si fuera código síncrono, o en un estilo de aspecto síncrono. Para demostrar, aquí está el código tanto para el enfoque basado en Promesa como para Async / Await. Tenga en cuenta que el enfoque de Promesa está comentado.
Parece que el código también funciona con el método asíncrono / espera.
async espera en nodejs
Algunas cosas clave para entender aquí sobre async / wait. Utiliza la palabra clave wait cuando llama a una función que devuelve una Promesa. Esto le permite asignar el resultado a una constante o variable tal como lo haría en una operación sincrónica. Por ejemplo, el código se const user = await getUser(1);ve muy agradable y sincrónico, pero la palabra clave wait nos da una indicación de que la función está devolviendo una promesa. Esto ahora facilita la capacidad de getBlogPosts(user.name)pasar la llamada en el objeto de usuario que acabamos de obtener en la línea de código anterior. Cada vez que vea esa palabra clave en espera antes de una función, sabrá que está devolviendo una promesa. Sin embargo, lo mejor es que ahora puede escribir ese código en un estilo de aspecto más sincrónico. La otra conclusión es que ya estás usandoawaitdentro de una función, debe usar la palabra clave asíncrona en esa función. Async y Await están construidos sobre Promesas y son una forma de tener una sintaxis más agradable, al igual que las clases ES6 son una sintaxis más agradable para prototipos y funciones de constructor. Si escribir código asincrónico hace girar la cabeza, entonces tal vez Async / Await sea justo lo que necesita.

Javascript Callbacks vs Promises vs Async Await Summary

Cuando escribe código asincrónico, es fácil meterse en problemas, especialmente si ha estado escribiendo código sincrónico durante mucho tiempo. La verdad es que utilizar las devoluciones de llamada de forma limpia y concisa es un desafío. Es posible que te encuentres en la pirámide del infierno de devolución de llamadas más rápido de lo que puedes parpadear. Puedes luchar contra el infierno de llamadas con estos consejos.
  • Usar módulos
  • Use Control Flow Managers
  • Usa promesas
  • Usar Async Await
  • Lee algunos tutoriales más como
    • Front End semanal
    • Tinus Wagner
    • Hackernoon
    • Academind
  • Vea un excelente tutorial de Traversy Media

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas