Javascript asíncrono usando Async - Await

Async/await es una forma relativamente nueva de escribir código asíncrono en Javascript. Antes usábamos callbacks y promises. Async/wait en realidad se basa en las promesas.

¿Por qué async/await? — Bueno, en pocas palabras, async/await nos permite escribir código asíncrono de forma síncrona.

Funciones Asíncronos - Async functions

Para crear una función de asíncrono todo lo que tenemos que hacer es añadir la palabra clave asíncrona async antes de la definición de la función, Por ejemplo:

async function asyncFunction() {
  return 'Hola ?';
}

— Lo único que necesitas saber sobre las funciones de asíncrono (async functions) es que siempre devuelven una promesa.

Si deseas devolver algo explicitamente que no sea una promesa, como el ejemplo mostrado anteriormente,

En el caso de que devolvamos explícitamente algo que no es una promesa, como el ejemplo anterior, el valor de retorno se envuelve automáticamente en una promesa.

/* Para el ejemplo anterior */
asyncFunction().then(result => console.log(result))

— Devolverá la cadena Hola ?

Await

La palabra clave awit solo se puede usar dentro de un bloque async, de lo contrario, generará un error de sintaxis. Esto significa que no puede usar await en el nivel superior de nuestro código, básicamente, no le uses solo.

¿Cuándo lo usamos? — Si tenemos una función asíncrona dentro de un bloque de asíncrono. Entonces, digamos que necesitamos obtener algunos datos de nuestro servidor y luego usarlos dentro de nuestro bloque asíncrono. Usaremos await para pausar la ejecución de la función y reanudarla después de que lleguen los datos.

En este ejemplo, usaremos una biblioteca auxiliar llamada Axios. Hace muchas de las mismas cosas que fetch, excepto que analiza el cuerpo de la respuesta por nosotros.

async function asyncFunction() {
  // obtener datos de una url
  const data = await axios.get('https://api.github.com/users/GodoFredoNinja');
  return data;
}

Await es simplemente una forma más elegante de escribir una promesa dentro de una función asíncrona . Mejora enormemente la legibilidad.

Supongamos que tenemos un par de funciones asíncronas dentro de nuestro async bloque. En lugar de encadenar promesas, podríamos hacer esto, que es mucho más limpio:

async function asyncFunction() {
  // obtener datos de una url
  const response = await axios.get('https://api.github.com/users/GodoFredoNinja');
  const data = await response.json();
  
  return data;
}

Manejo de errores

¿Cómo manejamos los errores? Tenemos algunas opciones, vamos a explorarlas:

Try — Catch

Esta es la manera más común de manejar los errores cuando se usa async-await. Todo lo que tiene que hacer es encapsular su código en un bloque de try y manejar cualquier error que ocurra en un catch.

async function asyncFunction() {
  try {
    // obtener datos de una url
    const data = await axios.get('https://api.github.com/users/GodoFredoNinja');

    return data;
  } catch(error) {
    console.log('error', error);
    // manejar adecuadamente el error
  }
}

Si se produce un error al obtener datos, la ejecución se transfiere al bloque de catch y podemos manejar cualquier error que se produzca. Si tenemos varias lineas de await, el bloque catch captura los errores que ocurren en todas las líneas.

async function asyncFunction() {
  try {
    // obtener datos de una url
    const response = await axios.get('https://api.github.com/users/GodoFredoNinja');
    const data = await response.json();

    return data;
  } catch(error) {
    console.log(error); // detecta errores
  }
}

Si no es ( try — catch )

De forma alternativa podemos añadir .catch() a la promesa generada por la función asíncrono async. Recapitulemos: Recuerde que la función de asíncrono async  devuelve una promesa. Si ocurre un error, entonces devuelve una promesa rechazada, por lo tanto, en la llamada a la función podríamos hacer esto:

asyncFunction().catch((error) => {
  // Manipular los errores adecuadamente
});

Método asíncrono en clases

Los métodos de clase pueden ser async.

class Example{
  async asyncMethod() {
    const data = await axios.get('https://api.github.com/users/GodoFredoNinja');
    return data
  }
}

Para llamar al método hacemos:

const exampleClass = new Example();
exampleClass.asyncMethod().then(/* Aquí tienes el resultado */)