Estados no cliente: carregando, erro e dados

Uma requisição não é instantânea

Pedir dados a uma API leva tempo: eles viajam pela rede, o backend trabalha, voltam. Durante esse tempo sua interface não pode ficar em branco. Toda chamada a uma API passa por três estados e a UI deve contemplar os três:

1. Carregando — a requisição saiu, ainda não há resposta. Mostre um spinner ou um esqueleto.
2. Erro — a resposta falhou (rede caída, 404, 500). Mostre uma mensagem e, se for o caso, um botão de tentar novamente.
3. Dados — chegou a resposta correta. Renderize o conteúdo.

async function carregar(api) {
  // estado: carregando
  try {
    const dados = await api("/usuarios");
    return { estado: "dados", dados };   // estado: dados
  } catch (e) {
    return { estado: "erro", erro: e.message }; // estado: erro
  }
}

Por que o try/catch importa

Se você não captura o erro, uma API caída quebra a interface: a promessa é rejeitada, o render falha e o usuário vê uma tela quebrada sem saber o que aconteceu. Envolver a chamada em try/catch transforma uma falha de rede em um estado que você sabe pintar.

Adaptar a resposta à UI

O formato que a API retorna raramente é o que sua interface precisa pintar. É boa prática adaptar (mapear) a resposta ao formato que a UI consome, em uma única camada, em vez de espalhar usuario.dados_pessoais.nome por toda a aplicação:

function adaptarUsuario(u) {
  return { id: u.id, nome: u.nome_completo, ativo: u.estado === "ATIVO" };
}

Assim, se o contrato do backend mudar, você só ajusta o adaptador e o resto da UI continua intacto.

No próximo módulo você verá a outra peça de conectar front e back: a autenticação com tokens (JWT), para que o backend saiba quem faz cada requisição.