Diferencia entre async y await en javascript

async y await son características introducidas en ES2017 que simplifican el manejo de promesas en JavaScript. La palabra clave async se utiliza para indicar que una función devuelve una promesa, mientras que await se utiliza para esperar a que se resuelva una promesa antes de continuar con la ejecución del código.

La manipulación de promesas puede ser un poco complicada en JavaScript porque a veces tenemos que anidar varias llamadas de devolución de llamada o encadenar múltiples promesas. async y await simplifican este proceso al permitirnos escribir código asíncrono que parece síncrono.

Veamos un ejemplo de cómo se utiliza una promesa para hacer una solicitud HTTP GET a una API y obtener algunos datos:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

En este ejemplo, utilizamos el método fetch para hacer una solicitud HTTP GET a la API de JSONPlaceholder y obtenemos una promesa. Luego, encadenamos dos métodos .then() para convertir la respuesta en formato JSON y almacenar los datos en la constante data. Finalmente, utilizamos el método .catch() para manejar cualquier error que pueda ocurrir durante la solicitud. Ahora, veamos cómo se vería el mismo código utilizando async y await:

async function obtenerDatos() {
  try {
    const respuesta = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const datos = await respuesta.json();
    console.log(datos);
  } catch (error) {
    console.error(error);
  }
}

obtenerDatos();

En este ejemplo, creamos la función obtenerDatos con la palabra clave async. Luego, utilizamos await para hacer una solicitud HTTP GET a la API de JSONPlaceholder utilizando fetch y almacenamos la respuesta en la constante respuesta. A continuación, utilizamos await nuevamente para convertir la respuesta en formato JSON utilizando el método .json() y almacenamos los datos en la constante datos. Finalmente, imprimimos los datos en la consola utilizando console.log(). 

Tambien utilizamos un bloque try...catch para manejar cualquier error que pueda ocurrir durante la solicitud. Si ocurre algún error, se imprimirá un mensaje de error en la consola utilizando console.error(). Observe cómo el código con async y await es más simple y fácil de leer que el código con promesas anidadas. Además, con async y await, no necesitamos encadenar múltiples llamadas de devolución de llamada o promesas, lo que hace que nuestro código sea más legible y fácil de mantener. 

Es importante tener en cuenta que await solo puede ser utilizado dentro de una función async, de lo contrario, se generará un error de sintaxis. 

Por lo tanto, async y await simplifican la manipulación de promesas en JavaScript al permitirnos escribir código asíncrono que parece síncrono. Con async podemos declarar funciones asíncronas que devuelven promesas, y con await podemos esperar a que se resuelva una promesa antes de continuar con la ejecución del código.