Consumir una API: carga, datos y errores

Pensar en los estados antes de la consulta

PokéAtlas consulta datos que no están incluidos en el HTML. Entre pulsar un botón y recibir una respuesta puede haber una espera, un error de conexión o un recurso inexistente.

Una interfaz necesita diferenciar inicio, carga, resultado y error. El mensaje de carga explica la espera; el de error debe permitir entender qué pasó y volver a intentarlo.

Comprobar la respuesta

async function getPokemon(name) {
  const identifier = encodeURIComponent(name.trim().toLowerCase());
  const response = await fetch(
    'https://pokeapi.co/api/v2/pokemon/' + identifier
  );
  if (!response.ok) {
    throw new Error('HTTP ' + response.status);
  }
  return response.json();
}

fetch no rechaza automáticamente la promesa por un HTTP 404. Por eso compruebo response.ok antes de interpretar el JSON.

Actualizar una interfaz sencilla

<p id="status" role="status"></p>
<p id="result"></p>

const status = document.querySelector('#status');
const result = document.querySelector('#result');

async function showPokemon(name) {
  status.textContent = 'Cargando...';
  result.textContent = '';
  try {
    const pokemon = await getPokemon(name);
    result.textContent = pokemon.name;
    status.textContent = 'Resultado disponible.';
  } catch (error) {
    status.textContent = 'No se pudo consultar. Inténtalo otra vez.';
  }
}

showPokemon('pikachu');

Lo que falta en una interfaz más completa

Si se permiten varias búsquedas seguidas, hay que controlar respuestas antiguas; se puede cancelar la anterior con AbortController. También conviene validar el campo, distinguir errores y manejar imágenes ausentes.

Uso textContent para mostrar el nombre como texto. El ejemplo no cubre todos los casos de producción. El endpoint de Pikachu se verificó al preparar este artículo.