Sobes.tech
Junior

¿Cómo manejas la situación cuando una promesa termina con un error (rechazo)?

sobes.tech AI

Respuesta de la IA

Estoy manejando con los métodos .catch() o .finally().

.catch() se usa para manejar promesas rechazadas. Si la promesa se cumple con éxito, el bloque .catch() se ignora.

// Manejo de errores con .catch()
fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Request failed'); // Simulación de error
    }
    return response.json();
  })
  .then(data => {
    console.log('Datos recibidos:', data);
  })
  .catch(error => {
    console.error('Error:', error); // Manejo del error aquí
  });

.finally() se ejecuta independientemente de si la promesa se cumple con éxito (fulfill) o con error (reject). Es útil para limpiar recursos o ocultar indicadores de carga.

// Uso de .finally() para ejecutar código después de que la promesa termina
fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Request failed');
    }
    return response.json();
  })
  .then(data => {
    console.log('Datos recibidos:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  })
  .finally(() => {
    console.log('Solicitud finalizada.'); // Este código siempre se ejecutará
  });

También puedo usar la construcción try...catch dentro de funciones async para manejar errores en operaciones asíncronas, incluyendo promesas:

// Manejo de errores en async/await con try...catch
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) {
      throw new Error('Request failed');
    }
    const data = await response.json();
    console.log('Datos recibidos:', data);
  } catch (error) {
    console.error('Error:', error); // Manejo del error aquí
  } finally {
    console.log('Operación de fetch finalizada.'); // Siempre se ejecuta
  }
}

fetchData();

La elección del método depende del contexto y la lógica de manejo requerida. .catch() es la estructura principal para reaccionar a errores, y .finally() para acciones que se realizan independientemente del resultado. try...catch en funciones async proporciona un estilo de manejo de errores más familiar y sincrónico.