Uso de async/espera en JavaScript con ejemplos

Async/Await es una característica de JavaScript que permite a los desarrolladores escribir código asíncrono de una manera más sincrónica. Con Async/Wait, los desarrolladores pueden escribir un código que espera a que se complete una operación asíncrona, sin bloquear el hilo principal de la ejecución.

En este artículo, exploraremos cómo usar async/espera en JavaScript con algunos ejemplos.

Sintaxis de Async/espera

La sintaxis de asíncrono/espera es bastante simple. Para definir una función asíncrona, agrega la palabra clave async antes de la palabra clave de función, así:

function async getData () // El código Async va aquí

123	function async getData () // El código Async va aquí

Dentro de asíncrata función, puede usar la palabra clave de espera para esperar una promesa de resolver, así:

function async getData () const respuesta = await fetch ('https: // api.ejemplo.com/data '); Const Data = Respuesta de espera.json (); devolver datos;

12345

function async getData () const respuesta = await fetch ('https: // api.ejemplo.com/data '); Const Data = Respuesta de espera.json (); devolver datos;

En este ejemplo, usamos la función Fetch para hacer una solicitud HTTP, y luego usamos la palabra clave de espera para esperar a que se devuelva la respuesta. Luego usamos la palabra clave de espera nuevamente para esperar a que los datos de JSON se analicen antes de devolverla.

Ejemplo: obtener datos de una API usando async/espera

Echemos un vistazo más de cerca a cómo usar async/espera para obtener datos de una API. En este ejemplo, utilizaremos la función Fetch para hacer una solicitud HTTP a la API de GitHub, y luego usaremos async/espera para esperar a que se devuelva la respuesta.

function async fetchgithubuser (nombre de usuario) const url = 'https: // API.github.com/users/$ UserName '; respuesta const = espera fetch (url); Const Data = Respuesta de espera.json (); devolver datos; fetchgithubuser ('Octocat') .entonces (data => consola.Dato de registro)) .Catch (Error => Consola.error (error));

12345678910

function async fetchgithubuser (nombre de usuario) const url = 'https: // API.github.com/users/$ UserName '; respuesta const = espera fetch (url); Const Data = Respuesta de espera.json (); devolver datos; fetchgithubuser ('Octocat') .entonces (data => consola.Dato de registro)) .Catch (Error => Consola.error (error));

En este ejemplo, definimos una función async llamada fetchgithubuser que toma un nombre de usuario de GitHub como su parámetro. Dentro de la función, construimos la URL para la solicitud API, usamos la función de búsqueda para realizar la solicitud y luego usamos la palabra clave de espera para esperar a que se devuelva la respuesta. Luego usamos la palabra clave de espera nuevamente para esperar a que los datos de JSON se analicen antes de devolverla.

Para llamar a la función async, utilizamos la sintaxis de promesa estándar, con un .entonces() método para manejar el caso de éxito y un .atrapar() Método para manejar cualquier error.

Ejemplo: Uso de promesas con async/espera

A veces, es posible que deba usar promesas con async/espera. En este ejemplo, usaremos el Promesa.todo() método para realizar múltiples solicitudes de API en paralelo, y luego use async/espera para esperar a que todas las solicitudes se complete antes de continuar.

function async fetchgithubdata () const urls = ['https: // API.github.com/users/octocat ',' https: // API.github.com/users/mojombo ',' https: // API.github.com/users/Defunkt ']; Const promesas = URLS.mapa (url => buscar (url)); respuestas const = espera promesa.todos (promesas); Const Data = espera promesa.Todos (respuestas.mapa (respuesta => respuesta.json ())); devolver datos; fetchgithubdata () .entonces (data => consola.Dato de registro)) .Catch (Error => Consola.error (error));

1234567891011121314151617

function async fetchgithubdata () const urls = ['https: // API.github.com/users/octocat ',' https: // API.github.com/users/mojombo ',' https: // API.github.com/users/Defunkt ']; Const promesas = URLS.mapa (url => buscar (url)); respuestas const = espera promesa.todos (promesas); Const Data = espera promesa.Todos (respuestas.mapa (respuesta => respuesta.json ())); devolver datos; fetchgithubdata () .entonces (data => consola.Dato de registro)) .Catch (Error => Consola.error (error));

En este ejemplo, definimos una función async llamada fetchgithubdata que construye una variedad de URL de solicitud de API y luego usa la mapa() Método para crear una variedad de promesas que obtendrán los datos de cada URL. Luego usamos el Promesa.todo() método para esperar a que todas las solicitudes se complete antes de continuar.

Después de haber recibido todas las respuestas, usamos el mapa() Método nuevamente para crear una variedad de promesas que analizarán los datos JSON de cada respuesta. Luego usamos la palabra clave de espera nuevamente para esperar a que todas estas promesas se completen antes de devolver los datos como una variedad de objetos.

Las mejores prácticas para usar async/espera

Aquí hay algunas de las mejores prácticas para usar Async/espera en su código JavaScript:

• Siempre manejar errores: El código asincrónico puede ser propenso a los errores, por lo que es importante manejarlos siempre correctamente. Puedes usar trata de atraparlo Bloqueos para atrapar errores dentro de una función async, o puede usar el .atrapar() Método en una promesa de manejar errores en el código de llamadas.
• No use exceso de asíncrono/espera: Si bien Async/Wait puede hacer que el código asincrónico sea más fácil de leer y escribir, no siempre es necesario o apropiado. Solo use async/espera cuando necesite esperar una promesa de resolver antes de continuar.
• Usar promesa.all () para solicitudes paralelas: Si necesita realizar múltiples solicitudes de API en paralelo, use el Promesa.todo() método para esperar a que todas las solicitudes se complete antes de continuar.
• No bloquees el hilo principal: Recuerde que el código asincrónico está destinado a ejecutarse en segundo plano, así que evite bloquear el hilo principal de la ejecución. Si su código tarda mucho en ejecutarse, considere usar un trabajador web para ejecutarlo en segundo plano.
• Mantenga las funciones pequeñas y enfocadas: Como con cualquier función, es importante mantener las funciones de asíncrono pequeñas y enfocadas. Si una función está haciendo demasiado, considere dividirlo en funciones más pequeñas y más enfocadas.

Conclusión

Async/Await es una característica poderosa de JavaScript que puede hacer que el código asíncrono sea más fácil de leer y escribir. Al usar la palabra clave de espera para esperar a las promesas que se resuelvan, puede escribir un código que se vea y se siente más como un código sincrónico. Solo recuerde manejar los errores correctamente, use la promesa.all () para solicitudes paralelas y evite bloquear el hilo principal de la ejecución.