Introducción
JavaScript (o simplemente "JS") es un lenguaje de programación que se usa con mayor frecuencia para scripts dinámicos de lado del cliente en páginas web, aunque actualmente también se usa a menudo en el lado del servidor, usando un entorno de ejecución adecuado. Se utiliza principalmente en el navegador, lo que permite a los desarrolladores manipular el contenido de la página web a través del DOM, manipular datos con AJAX, dibujar gráficos con canvas, interactuar con el dispositivo que ejecuta el navegador a través de varias APIs y más. JavaScript es uno de los lenguajes más utilizados en el mundo, debido al reciente crecimiento y mejora en el rendimiento de las APIs disponibles en los navegadores.
Consumir una api
Un ejemplo de uso de await para traernos una cita célebre desde una api pública. Para situaciones en las que se requiere un procesamiento asíncrono, existen las Promises. Cuando enviamos una petición a una API, tenemos la promesa de que estos datos llegarán, pero hasta que eso suceda, el sistema debe seguir funcionando. Por ejemplo, ante un fallo del servidor, esa promesa de datos podría no cumplirse y habría que gestionarlo. Las promesas funcionan en este contexto. Existen dos formas de trabajar con Promises en JavaScript: usando el método .then() o las palabras clave async y await. El tándem async/await se introdujo en la octava edición de ECMA-262 en junio de 2017.
<!DOCTYPE html>
<html>
<title>Cita al azar</title>
<head>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
height: 500px;
border: 3px solid green;
}
.autor { margin-left:15px; font-family:arial; font-size:12px }
.cita { margin-left:25px; font-size:25px }
</style>
<script type="text/javascript">
async function awaitAndReceivePromise() {
const respuesta = (await fetch('https://api.quotable.io/quotes/random')).json();
const objetoCita = (await respuesta)[0];
var cita = document.getElementById("cita");
var autor = document.getElementById("autor");
cita.innerHTML = objetoCita.content;
autor.innerHTML = objetoCita.author;
}
</script>
</head>
<body onload="awaitAndReceivePromise();">
<div class="container">
<p class="autor" id="autor"></p>
<div class="center">
<p class="cita" id="cita"></p>
</div>
</div>
</body>
</html>