O fluxo full-stack: fetch para a API

Unindo as duas metades

Você já tem um frontend (React) e um backend (Node/Express com uma API). O full-stack é conectá-los: o frontend faz requisições HTTP à API e mostra a resposta.

fetch

No navegador, fetch faz requisições HTTP. Retorna uma promessa:

async function carregarUsuarios() {
  const resposta = await fetch("/api/usuarios");
  const usuarios = await resposta.json();
  return usuarios;
}

• fetch(url) retorna uma promessa com a resposta.
• resposta.json() (também uma promessa) extrai o corpo como objeto.
• Para enviar dados (POST), você passa opções: método, cabeçalhos e body.

O ciclo completo

1. O usuário faz algo no frontend (clica em um botão).
2. O frontend chama a API com fetch.
3. O backend processa, consulta o banco de dados e responde com JSON.
4. O frontend recebe a resposta e atualiza a interface (estado do React).

No exercício te passamos uma função api que simula o backend. Você escreve a lógica que a usa e processa a resposta.