Intermediojavascript
Promesas y Async/Await
Gestiona codigo asincrono de forma limpia con Promesas y la sintaxis async/await.
Que es la asincronia
JavaScript es un lenguaje single-threaded con un modelo de concurrencia basado en un event loop. Puede programar operaciones futuras (llamadas a APIs, temporizadores) sin bloquear el hilo principal.
Promesas (Promises)
Una Promesa es un objeto que representa el resultado eventual de una operacion asincrona. Puede estar en tres estados:
- pending: La operacion aun no ha terminado.
- fulfilled: Se completo exitosamente.
- rejected: La operacion fallo.
javascript
1const obtenerDatos = new Promise((resolve, reject) => {
2 setTimeout(() => {
3 const exito = true;
4 if (exito) {
5 resolve({ usuario: "Ana", id: 1 });
6 } else {
7 reject("Error al obtener datos");
8 }
9 }, 2000);
10});
11
12obtenerDatos
13 .then(datos => console.log("Datos:", datos))
14 .catch(error => console.error("Error:", error))
15 .finally(() => console.log("Operacion completada"));Async/Await: Sintaxis moderna
La palabra clave
async convierte una funcion en una que retorna una Promesa. Dentro de ella, await pausa la ejecucion hasta que la Promesa se resuelva.javascript
1async function obtenerUsuario(id) {
2 try {
3 const response = await fetch(`https://api.ejemplo.com/users/${id}`);
4 if (!response.ok) throw new Error("Usuario no encontrado");
5 const usuario = await response.json();
6 return usuario;
7 } catch (error) {
8 console.error("Error:", error.message);
9 }
10}
11
12obtenerUsuario(1);Promise.all y Promise.race
Promise.all() espera a que todas las promesas se resuelvan. Promise.race() retorna la primera que se complete.javascript
1const promesa1 = fetch("/api/users");
2const promesa2 = fetch("/api/posts");
3const promesa3 = fetch("/api/comments");
4
5const [users, posts, comments] = await Promise.all([
6 promesa1.then(r => r.json()),
7 promesa2.then(r => r.json()),
8 promesa3.then(r => r.json()),
9]);
10
11console.log("Todo cargado:", users.length, posts.length);Prueba lo aprendido
Escribe código JavaScript y ejecútalo directamente en el navegador.
Editor de Códigojavascript
1const obtenerDatos = new Promise((resolve, reject) => {
2 setTimeout(() => {
3 const exito = true;
4 if (exito) {
5 resolve({ usuario: "Ana", id: 1 });
6 } else {
7 reject("Error al obtener datos");
8 }
9 }, 2000);
10});
11
12obtenerDatos
13 .then(datos => console.log("Datos:", datos))
14 .catch(error => console.error("Error:", error))
15 .finally(() => console.log("Operacion completada"));