JavaScript

Web APIs

HTTP

Fetch

async / await

Con await esperamos a que la operación asíncrona termine (la promesa), y con async marcamos aquellas funciones que en su interior tienen operaciones asíncronas (tienen await y/o retornan promesas). Con este sistema se consigue un código sin funciones anidadas más sencillo de seguir:

const peticion = async function() {
  try {
    const respuesta = await fetch('URL', {
      method: 'POST',
      mode: 'cors',
      headers: {'Accept': 'application/json', 'Content-Type': 'application/json'},
      body: JSON.stringify({cuerpo: 'peticion'}),
    });
    if (respuesta.ok) {
      const objeto = await respuesta.json();
      console.log('Respuesta OK:', objeto);
      return objeto;
    } else {
      console.log('Respuesta KO:', respuesta.status);
      throw respuesta;
    }
  } catch (error) {
    console.error('Error inexperado:', error);
    throw error;
  }
}
const objetoRespuesta = await peticion();

❓ Ejercicio: Cambia el código del ejemplo anterior para que en utilice async y await.

<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 = async function() {
  // Completar ...
}
// 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; }