Apuntes sobre Javascript

JavaScript lo resuelve todo... eventualmente.

Introducción a la Programación Asíncrona

Hasta ahora, has aprendido a manipular el DOM y responder a eventos. Pero, ¿cómo carga tu página datos de un servidor —una lista de productos, el perfil de un usuario— sin tener que recargarla entera? Esa es la situación donde entra la programación asíncrona: la capacidad de pedir datos y seguir trabajando mientras llegan, sin bloquear la página.

1. El problema: cargar datos lleva tiempo

Imagina que tu página necesita mostrar una lista de usuarios que viene de un servidor. Esa petición puede tardar uno o dos segundos. Si JavaScript esperara bloqueado hasta recibir la respuesta, la página entera se congelaría: no podrías hacer clic en nada ni desplazarte mientras tanto.

La solución es lanzar la petición sin bloquear: JavaScript la envía, sigue ejecutando el resto del código, y cuando llega la respuesta la procesa. A esto se le llama programación asíncrona.

En PHP, una consulta a la base de datos detiene el script hasta recibir los datos. En el navegador eso no es aceptable, de ahí que JavaScript funcione de otro modo.

2. fetch: la herramienta principal

fetch hace peticiones HTTP a un servidor o API desde el navegador. Es equivalente a curl o file_get_contents en PHP, pero en el cliente.

fetch devuelve una promesa: un objeto que representa un resultado que llegará en el futuro. Puedes reaccionar a ese resultado con .then() y a los errores con .catch():

fetch("https://jsonplaceholder.typicode.com/users")
  .then(respuesta => respuesta.json())  // convierte la respuesta a objeto JS
  .then(datos => console.log(datos))    // usa los datos
  .catch(error => console.log(error));  // maneja errores

Esto funciona, pero encadenar varios .then() se vuelve difícil de leer. Por eso existe async/await.

3. Usando async/await

async/await permite escribir el mismo código de forma más clara y lineal, como si fuera síncrono. En lugar de encadenar .then(), marcas la función como async y pones await delante de cada operación que devuelve una promesa.

async function obtenerUsuarios() {
  try {
    let respuesta = await fetch("https://jsonplaceholder.typicode.com/users");
    let usuarios = await respuesta.json();
    console.log(usuarios);
  } catch (error) {
    console.log("Error:", error);
  }
}

obtenerUsuarios();
  • async: marca la función como asíncrona.
  • await: espera a que llegue el resultado antes de pasar a la siguiente línea.
  • try/catch: captura cualquier error, igual que en PHP.

4. Ejemplo Realista: Cargar Datos de una API

Vamos a usar la función fetch para cargar datos de una API pública, algo similar a hacer una consulta HTTP en PHP con curl.

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>API de Usuarios</title>
</head>
<body>
  <h1>Usuarios</h1>
  <ul id="lista-usuarios"></ul>
  <button id="cargar">Cargar Usuarios</button>
  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

let boton = document.getElementById("cargar");
let lista = document.getElementById("lista-usuarios");

async function cargarUsuarios() {
  try {
    let respuesta = await fetch("https://jsonplaceholder.typicode.com/users");
    let usuarios = await respuesta.json();
    lista.innerHTML = ""; // Limpia la lista
    usuarios.forEach(usuario => {
      let li = document.createElement("li");
      li.textContent = usuario.name;
      lista.appendChild(li);
    });
  } catch (error) {
    lista.innerHTML = "<li>Error al cargar usuarios</li>";
  }
}

boton.addEventListener("click", cargarUsuarios);

Cómo funciona:

  • fetch: Hace una solicitud HTTP a una API (similar a curl en PHP).
  • await fetch(...): Espera la respuesta de la API.
  • await respuesta.json(): Convierte la respuesta a un objeto JavaScript.
  • Los nombres de los usuarios se añaden a una lista en el DOM.
  • Si hay un error (como fallo de red), se muestra un mensaje de error.

Conexión con PHP: Esto es como usar file_get_contents o curl en PHP para obtener datos de una API, pero en JavaScript se hace en el navegador y se actualiza la página dinámicamente.

5. Buenas Prácticas

  1. Maneja errores siempre: Usa .catch() o try/catch para evitar que los errores rompan tu aplicación.
  2. Indica carga al usuario: Muestra un mensaje como "Cargando..." mientras esperas datos (puedes modificar el DOM).
  3. Evita promesas anidadas: Usa async/await para mantener el código legible.
  4. Valida datos de la API: Verifica que los datos recibidos sean válidos antes de usarlos.
  5. Prueba en un entorno real: Usa JSFiddle o un archivo HTML local para probar fetch con APIs públicas.

Nota: JavaScript es single-threaded: solo ejecuta una cosa a la vez. La asincronía no significa que el código se ejecute en paralelo, sino que JavaScript puede delegar tareas lentas (una petición de red, un temporizador) y continuar con otras cosas mientras espera la respuesta.

En la próxima lección: proyecto final, una aplicación completa que combina variables, funciones, DOM, eventos y asincronía.

TOP