Header Ads Widget

Ticker

6/recent/ticker-posts

Convierta la cadena basada en promesas en Async / Await con VS Code

 En este ejemplo, veremos cómo convertir una promesa a sintaxis asíncrona / en espera en JavaScript / TypeScript manualmente y luego automáticamente usando una función de Visual Studio Code.

Ahora que la sintaxis Async / Await se está volviendo popular entre los desarrolladores de JavaScript, las promesas pueden, en la mayoría de los casos, evitarse, pero todavía se usan con frecuencia para escribir lógica asincrónica, ya que no están obsoletas.

Al escribir código lógico complejo, encadenar las then()funciones de las promesas hará que su código se vea como spagetti. al igual que las antiguas devoluciones de llamada. El uso de la sintaxis Async / Await, en este caso, le ayudará a escribir código limpio y más fácil de mantener. Veamos cómo convertir una cadena basada en promesas a la sintaxis async / await.

Convertir una cadena de promesas en Aync / Await Ejemplo 1

Por ejemplo, este es un ejemplo simple de un encadenamiento basado en promesas:

fetchData()
    .then(process())
    .then(processAgain());

Esto se puede convertir fácilmente en async/awaitsintaxis de la siguiente manera:

const response1 = await fetchData();
const response2 = await process(response1);
const response = await processAgain(response2);

Esto parece un código asincrónico que está más alineado con la forma en que nuestras mentes pueden percibir las cosas.

El encadenamiento de promesas se usa cuando tenemos una tarea con varios pasos y cada paso realiza operaciones asincrónicas, como conectarse a una base de datos o obtener datos de una API remota.

Tenga en cuenta que al usar los then()métodos, usamos variables locales que tienen como alcance la then()función del paso, pero al convertir a la async/awaitsintaxis, esas variables estarán disponibles para todas las funciones, por lo que esto puede hacer que el código sea menos legible

Conversión de promesas a Async / Await con Visual Studio Code

Visual Studio Code proporciona una característica interesante que permite a los desarrolladores convertir cadenas de Promise.then()llamadas en async/awaitllamadas automáticamente.

Esto funciona tanto con TypeScript como con JavaScript.

Puede usarlo de la siguiente manera:

  • Primero, seleccione el código que contiene las Promise.then()llamadas,
  • A continuación, haga clic en el icono de la bombilla que aparecerá,
  • Finalmente, elija Convert to async function.

Conclusión

Los desarrolladores de aplicaciones para el usuario todavía utilizan las promesas y no hay nada de malo en ello, pero su uso async/awaitdará como resultado un código que se puede entender y mantener fácilmente si se hace con cuidado. Async / await ya es compatible con los navegadores web modernos, excepto IE. Escribir código asincrónico con async/awaitserá más legible y fácil de mantener.

¡Puede usar Visual Studio Code para migrar fácilmente su antiguo código encadenado de promesas a async-awaitcódigo!

Publicar un comentario

0 Comentarios