JavaScript

Web APIs

HTTP

Fetch

then / catch

Con then configuramos una función que trata la respuesta, y con catch configuramos otra función que tratará posibles errores durante la recepción de la misma:

fetch('URL', {
  method: 'POST',
  mode: 'cors',
  headers: {'Accept': 'application/json', 'Content-Type': 'application/json'},
  body: JSON.stringify({cuerpo: 'peticion'})
}).then(respuesta => {
  if (respuesta.ok) {
    return respuesta.json();
  } else {
    throw respuesta.status;
  }
}).then(json => {
    console.log('Respuesta OK:', json);
    // A continuación viene código que usa objeto del json ...
}).catch(error => {
  console.error('Error inexperado:', error);
  // A continuación viene código que trata el error ...
});

<body>
<div class="card">
  <div class="card-header">Mensajes</div>
  <div class="card-body row">
    <div class="col text-center">
      <h5 id="titulo" class="card-title">No tienes mensajes</h5>
      <p id="mensaje" class="card-text"><i class="bi bi-chat" style="font-size: 4rem; color:gray;"></i></p>
      <button id="boton" type="button" class="btn btn-primary" onclick="actualizar()">Actualizar</button>
    </div>
  </div>
  <div id="estado" class="card-footer text-muted">Sin actualizar</div>
</div>
</body>
const peticion = function() {
  fetch('https://httpstat.us/200?' + new URLSearchParams({sleep: 4000}), {
    method: 'GET',
    mode: 'cors',
    headers: {'Accept': 'application/json', 'Content-Type': 'application/json'}
  }).then(respuesta => {
    if (respuesta.ok) {
      return respuesta.json();
    } else {
      throw respuesta.status;
    }
  }).then(objeto => {
    mostrarMensajes(objeto);
  }).catch(error => {
    mostrarError(error);
  });
}
// Lógica para cambiar la interfaz de usuario en función
// de la respuesta recibida:
const boton = document.getElementById('boton');
const estado = document.getElementById('estado');
const mostrarMensajes = function(mensajes) {
  cambiaEstadoBoton('enabled');
  estado.textContent = `0 mensajes - Actualizado a las ${new Date().toLocaleTimeString()}`;
}
const mostrarError = function(error) {
  cambiaEstadoBoton('enabled');
  estado.innerHTML = `<i class="bi bi-exclamation-triangle-fill"></i> Error al actualizar (${error})`;
}
const mostrarActualizando = function() {
  cambiaEstadoBoton('disabled');
  estado.innerHTML = '<div class="spinner-border spinner-border-sm"></div> Actualizando...';
}
const cambiaEstadoBoton = function(estado) {
  boton.disabled = estado === 'disabled';
}
const actualizar = function() {
  mostrarActualizando();
  peticion();
}

html { font-size: 75%; padding: 2rem; }

❓ Pregunta: ¿Para qué crees que vale el URLSearchParams de la query de la URL? ¿Y las cabeceras HTTP? (pista).

❓ Ejercicio: Añade trazas al código anterior para ver qué se ejecuta cuando la URL de la petición es:

  1. https://httpstat.us/500
  2. https://invalid.us/