¿Cómo funciona await y async en ES6?

En este artículo, intentaremos comprender cómo funcionan exactamente async y await en ES6. Primero tratemos de entender qué son exactamente async y await junto con su uso y luego veremos algunos ejemplos en los que veremos cómo podemos usar async y await junto con las funciones normales.

Asíncrono y espera :

• Async y Await se consideran palabras clave especiales proporcionadas por ES6 para realizar algunas operaciones de datos asincrónicos. Incluso las operaciones sincrónicas también podrían realizarse utilizando estas palabras clave.
• La palabra clave asíncrona se usa junto con la declaración de función que especifica que esta función ahora puede aceptar todo tipo de eventos asíncronos en sí misma.
• En otras palabras, la palabra clave async se usa junto con funciones (o métodos) que les permite recibir fácilmente todo tipo de datos asíncronos.
• El uso de palabras clave asíncronas junto con las funciones siempre devuelve una promesa al final junto con su estado (pendiente, resuelto o rechazado).
• Await se usa dentro de la función asíncrona, que es útil para el propósito de espera del resultado.
• Await básicamente espera los resultados que se obtendrán particularmente de la fuente desde la cual esa función asíncrona está a punto de obtener los datos.
• Await tarda un poco en obtener los resultados de la fuente (como la API) y luego, junto con la función asíncrona, devuelve el resultado en forma de promesa.
• Await también se puede usar si Async se usa junto con la declaración de la función.

Funcionamiento de Async y Await:

• Cada vez que un usuario declara una función con la palabra clave async en su declaración, implica automáticamente el hecho de que esta función o método está listo para recibir todos los eventos asíncronos en sí mismo.
• Después de esto, generalmente usamos la palabra clave await que luego espera los resultados y luego los obtiene con éxito.
• Después de eso, almacenamos el resultado obtenido en alguna variable aleatoria y luego mostramos el resultado o usamos ese resultado para varios otros propósitos según el requisito.
• Una función que usa palabras clave Async/Await eventualmente retendrá sus resultados por una pequeña cantidad de tiempo en comparación con otras funciones normales.
• Una vez completado con éxito, el resultado puede usarse para más operaciones de datos dentro del propio código o puede mostrarse correctamente en la consola del navegador.

Ahora que hemos entendido los detalles asociados con el uso de Async/Await en funciones normales, veamos algunos de los siguientes ejemplos que eventualmente nos ayudarán a entender las cosas de una manera mucho mejor.

Ejemplo 1: en este ejemplo, estaríamos usando async y await dentro de una función (o método) regular. Junto con eso, estaríamos mostrando algunos otros resultados. El resultado a continuación nos mostrará una cosa que, debido al uso de la palabra clave await, nuestro resultado se retrasará un poco en comparación con los otros resultados que estamos mostrando.

<script>
    let dataDisplay = async () => {
      let data = await "GeeksforGeeks";
      console.log(data);
    };
    console.log(1);
    dataDisplay();
    console.log("Hello");
</script>

Producción:

1
Hello
GeeksforGeeks

Ejemplo 2: en este ejemplo, estaríamos usando una API de código abierto que es una API disponible gratuitamente y a la que todos pueden acceder. Obtendremos los resultados de esa API en la consola de nuestro navegador. Este ejemplo demuestra claramente cómo usaremos async/await en general mientras trabajamos con varias API en tiempo real. La salida se mostrará en la siguiente imagen mostrada.

<script>
    async function fetchMethod() {
      let response = await fetch(
        "https://reqres.in/api/products/3");
      let data = await response.json();
      console.log(data);
    }
    fetchMethod();
</script>

Producción: