Consumindo APIs no Front-End com Fetch API

Fluxo completo com async/await, tratamento de loading, response.ok e try/catch.

Cuidados essenciais com o `fetch()`

Ao consumir uma API no navegador usando fetch(), lembre-se de três pontos que costumam confundir quem está começando:

Pegadinha clássica: o fetch() não entra no catch quando o servidor responde 404 ou 500! Ele só rejeita a Promise em falhas de rede (sem internet, DNS, CORS bloqueado). Por isso, sempre cheque if (!response.ok).
response.json() também é assíncrono: use await response.json() para converter o corpo em objeto JS.
Gerencie estados na interface: mostre feedback de carregamento (loading), trate erros amigavelmente e finalize o loading no bloco finally.

Abaixo, um exemplo real consultando a PokéAPI que você pode testar direto no console do navegador:

Exemplo Prático

javascript

async function carregarPokemon(nome = 'pikachu') {
  try {
    const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${nome}`, {
      headers: { Accept: 'application/json' }
    });

    if (!response.ok) {
      throw new Error(`Erro HTTP ${response.status}`);
    }

    const pokemon = await response.json();
    console.log(pokemon.name, pokemon.types.map((item) => item.type.name));
  } catch (erro) {
    console.error('Não foi possível carregar o Pokémon:', erro.message);
  }
}

Consumindo APIs no Front-End com Fetch API

Cuidados essenciais com o fetch()

Teste seus conhecimentos

Cuidados essenciais com o `fetch()`