Pular para o conteúdo

API

O endereço de onde a interface busca dados. É a fonte que preenche o que no Figma é texto de mentira.

Também aparece como "endpoint", "REST", "fetch", "requisição", "backend".

API é um contrato: você pede alguma coisa num endereço e recebe dados de volta, normalmente em JSON.

const resposta = await fetch("https://api.exemplo.com/produtos");
const produtos = await resposta.json();

Tudo que na sua tela é conteúdo real veio de uma API: lista de pedidos, nome do usuário, saldo, notificações.

Por que isso muda o seu desenho

No Figma o dado chega instantâneo e perfeito. Na vida real ele demora, às vezes falha e às vezes vem torto. Cada chamada de API produz pelo menos quatro estados que alguém vai ter que desenhar:

  • carregando: enquanto a resposta não chega
  • vazio: a resposta chegou e não tem nada
  • erro: a resposta não chegou, ou chegou quebrada
  • sucesso: o caso que você já desenhou

Quando o dev pergunta "e se der erro", ele está pedindo a tela que falta, não criando problema.

O vocabulário mínimo

  • endpoint: cada endereço específico da API, tipo /produtos ou /produtos/42
  • GET, POST, PUT, DELETE: buscar, criar, atualizar e apagar
  • status 200, 404, 500: deu certo, não existe, quebrou do lado do servidor
  • payload: o pacote de dados que vai ou volta

Veja também assíncrono, que é o motivo de tudo isso ter espera.

Outros termos de JavaScript

Quer o assunto inteiro e não só a definição? Os guias pegam cada tema do começo ao fim.