Asíncrono y espera en JavaScript
Async y Await en JavaScript son palabras clave potentes que se utilizan para manejar operaciones asincrónicas con promesas. Las funciones asíncronas devuelven promesas implícitamente, mientras que Await pausa la ejecución hasta que se resuelve la promesa. Esto simplifica el código asincrónico y mejora la legibilidad al hacerlo parecer sincrónico.
Función asíncrona
El async> La función nos permite escribir código basado en promesas como si fuera sincrónico. Esto asegura que el hilo de ejecución no esté bloqueado.
- Manejo de promesas : Las funciones asíncronas siempre devuelven una promesa. Si se devuelve un valor que no es una promesa, JavaScript lo envuelve automáticamente en una promesa resuelta.
Sintaxis asíncrona
async function myFunction() { return 'Hello'; } Ejemplo: Aquí veremos el uso básico de async en JavaScript.
javascript const getData = async () =>{ let data = 'Hola mundo'; datos de devolución; } getData().then(datos => console.log(datos)); Producción
Hello World
Esperar palabra clave
El await> La palabra clave se utiliza para esperar a que se resuelva una promesa. Sólo se puede utilizar dentro de un bloque asíncrono.
- Pausa de ejecución : Await hace que el código espere hasta que la promesa devuelva un resultado, lo que permite un código asincrónico más limpio y manejable.
Sintaxis
let value = await promise;
Ejemplo : Este ejemplo muestra el uso básico de la palabra clave await en JavaScript.
javascript const getData = async () =>{ let y = await 'Hola Mundo'; consola.log(y); } consola.log(1); obtener datos(); consola.log(2); Producción
1 2 Hello World
El asíncrono La palabra clave transforma una función JavaScript normal en una función asincrónica, lo que hace que devuelva una Promesa.
El esperar La palabra clave se usa dentro de una función asíncrona para pausar su ejecución y esperar a que se resuelva una Promesa antes de continuar.
Ejemplo de asíncrono/espera
Aquí, implementaremos varias promesas en un método, y luego usaremos ese método para mostrar nuestro resultado. Puedes consultar el JS. sintaxis asíncrona/espera en el ejemplo.
JavaScript function asynchronous_operational_method() { let first_promise = new Promise((resolve, reject) =>resolver('Hola')); let second_promise = new Promise((resolver, rechazar) => { setTimeout(() => { resolver(' techcodeview.com..'); }, 1000); }); let combine_promise = Promise.all([primera_promesa, segunda_promesa]); devolver promesa_combinada; } visualización de función asíncrona() { let data = await asynchronous_operative_method(); consola.log(datos); } mostrar(); Producción:
[ 'Hello', ' techcodeview.com..' ]
Explicación:
- Creación de promesas :
- Se crean dos promesas: una se resuelve inmediatamente con Hello y la otra se resuelve después de 1 segundo con techcodeview.com...
- Combinando promesas :
- El método Promise.all() combina ambas promesas en una sola promesa, combine_promise.
- Función asincrónica :
- La función display() se declara como asíncrona, lo que indica que contiene operaciones asincrónicas.
- En espera de resolución de promesa :
- La palabra clave await pausa la ejecución hasta que se resuelva la promesa combinada.
- Resultado del registro :
- La matriz resuelta de combine_promise se registra en la consola.
Nota
A resolver y rechazar son argumentos predefinidos por JavaScript.
- La función de resolución se utiliza cuando se completa una tarea asincrónica y devuelve el resultado.
- La función de rechazo se utiliza cuando falla una tarea asincrónica y devuelve los motivos del error.
Ventajas de Async y Await
- Legibilidad mejorada : Async y Await permiten escribir código asincrónico en un estilo sincrónico, lo que facilita su lectura y comprensión.
- Manejo de errores : El uso de bloques try/catch con async/await simplifica el manejo de errores.
- Evita el infierno de las devoluciones de llamadas : Async y Await ayudan a evitar devoluciones de llamadas anidadas y cadenas de promesas complejas.
- Mejor depuración : La depuración de código asíncrono/en espera es más intuitiva ya que se comporta como código síncrono.
Conclusión
Async y Await en JavaScript han revolucionado la programación asincrónica al hacer que el código sea más legible y fácil de mantener. Al permitir que el código asincrónico se escriba en un estilo sincrónico, reducen la complejidad asociada con las devoluciones de llamadas y el encadenamiento de promesas. Comprender y utilizar async y await de manera efectiva puede mejorar significativamente sus habilidades de programación en JavaScript, facilitando el manejo de operaciones asincrónicas en sus proyectos.
Navegadores compatibles:
Los navegadores soportados por JS. Función asíncrona/espera están enlistados debajo:
- Google Chrome 55 y superior
- Firefox 52 y superior
- Apple Safari 10.1 y superior
- Ópera 42 y superior
- Borde 14 y superior