[Promesas y Async Await en JS] Ejemplos para Clase #4 de Master en Frontend - Módulo JS Avanzado #masterfrontend #modulo5

async-await.js

// RESOLVER PROMESAS 1: THEN - CATCH
function getPokemonThen(name = 'ditto') {
  return fetch(`https://pokeapi.co/api/v2/pokemon/${name}`)
    .then(response => {
      if (!response.ok) {
        throw new Error(`Error HTTP ${response.status}`);
      }
      return response.json();
    })
    .then(pokemon => {
      console.log('Nombre:', pokemon.name);
      console.log('Altura:', pokemon.height);
      console.log('Peso:', pokemon.weight);
      console.log('Habilidades:', pokemon.abilities
        .map(a => a.ability.name).join(', '));
      return pokemon;
    })
    .catch(err => {
      console.error('Falló la petición:', err.message);
      throw err;      
    })
}

getPokemonThen();           


// RESOLVER PROMESAS 2: ASYNC / AWAIT

async function getPokemon(name = 'ditto') {
  try {
    const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${name}`);
    if (!response.ok) {
      throw new Error(`Error HTTP ${response.status}`);
    }

    const pokemon = await response.json();

    console.log('Nombre:', pokemon.name);
    console.log('Altura:', pokemon.height);
    console.log('Peso:', pokemon.weight);
    console.log('Habilidades:', pokemon.abilities
      .map(a => a.ability.name).join(', '));

    return pokemon;        
  } catch (err) {
    console.error('Falló la petición:', err.message);
    throw err;                    // Re-lanzar si quieres manejarlo fuera
  }
}

// Llamada de ejemplo
getPokemon();

promesas.js

// --- Declaración de la promesa ---

function ordenarPizza(sabor) {
  // 1. Creamos y retornamos una nueva Promesa con dos parámetros:
  // - resolve: una función que llamamos cuando la promesa se cumple.
  // - reject: una función que llamamos cuando la promesa falla.
  return new Promise((resolve, reject) => {
    console.log(`Recibiendo orden de pizza de ${sabor}...`);

    // 2. Simulamos el tiempo de preparación con setTimeout.
    // Esto hace que la operación sea asíncrona (no ocurre al instante).
    setTimeout(() => {
      // 3. La lógica de nuestro "negocio" (la pizzería).
      if (sabor === 'peperoni' || sabor === 'hawaiana') {
        // ¡Éxito! Tenemos el sabor. Llamamos a `resolve`.
        resolve(`¡Aquí está tu pizza de ${sabor}! ¡Buen provecho!`);
      } else {
        // ¡Fallo! No tenemos ese sabor. Llamamos a `reject`.
        reject(`Lo sentimos, no tenemos pizza de ${sabor} en el menú.`);
      }
    }, 3000); // La pizza tarda 3 segundos en estar lista.
  });
}

// --- Consumir la promesa ---

// Caso 1: Ordenar una pizza que sí tenemos en el menú (Peperoni)
console.log("Cliente 1: 'Quiero una pizza de peperoni, por favor.'");
const promesaPeperoni = ordenarPizza('peperoni');

promesaPeperoni
  .then(mensajeDeExito => {
    // El bloque .then() se ejecuta si la promesa se RESUELVE (resolve).
    // 'mensajeDeExito' es lo que pasamos a la función resolve().
    console.log("Cliente 1 feliz:", mensajeDeExito);
  })
  .catch(mensajeDeError => {
    // El bloque .catch() se ejecuta si la promesa se RECHAZA (reject).
    // 'mensajeDeError' es lo que pasamos a la función reject().
    console.error("Cliente 1 triste:", mensajeDeError);
  });

// Caso 2: Ordenar una pizza que NO tenemos (Suprema)
setTimeout(() => {
    console.log("\n-----------------------------------\n");
    console.log("Cliente 2: 'Me da una pizza de Suprema.'");
    const promesaSuprema = ordenarPizza('Suprema');

    promesaSuprema
      .then(mensajeDeExito => {
        console.log("Cliente 2 feliz:", mensajeDeExito);
      })
      .catch(mensajeDeError => {
        console.error("Cliente 2 triste:", mensajeDeError);
      });
}, 1500); // El cliente 2 llega un segundo y medio segundo después.