Page cover

9.2 - Como funciona requisições HTTP?

E como funciona as requisições HTTPs?

O HTTP (HyperText Transfer Protocol) é o protocolo que permite a comunicação entre clientes (normalmente navegadores) e servidores (onde ficam os sites e APIs).

Quando você acessa um site ou faz uma chamada de API, ocorre uma requisição HTTP, que funciona como uma carta enviada de um cliente para um servidor pedindo alguma informação ou solicitando que alguma ação seja feita.

🔄 Funcionamento básico

  1. Cliente envia uma requisição O cliente (ex: navegador, app ou frontend em React) envia uma requisição HTTP para um servidor.

  2. Servidor processa a requisição O servidor recebe o pedido, executa o que foi solicitado (buscar dados, salvar algo no banco, etc.) e prepara uma resposta.

  3. Servidor envia uma resposta HTTP O servidor devolve uma resposta com:

    • Um status code (ex: 200 OK, 404 Not Found, 500 Internal Server Error)

    • Um corpo da resposta (body), com os dados solicitados (ex: JSON, HTML, texto)

🕛 O que é Fetch API?

A Fetch API é uma interface do JavaScript utilizada para fazer requisições HTTP assíncronas. Ela fornece uma forma moderna, baseada em promises, para buscar recursos pela rede — como acessar APIs ou carregar dados de servidores.

É amplamente usada em aplicações webs para:

  • Obter dados de servidores (ex: via GET);

  • Enviar dados (ex: via POST);

  • Interagir com APIs REST de forma eficiente.

⚙️9.2.1 - O que é assíncrono?

🧱 Estrutura básica

fetch(url, options)

  • url: A URL do recurso que será acessado.

  • options (opcional): Um objeto com configurações da requisição, como:

    • method (ex: 'GET', 'POST')

    • headers (cabeçalhos HTTP personalizados)

    • body (conteúdo enviado, geralmente, em JSON)

✅ Exemplo simples

fetch('https://api.exemplo.com/dados')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Erro:', error));
☝️🤓 Explicação do exemplo

x📡 fetch('https://api.exemplo.com/dados')

  • fetch() → Função JavaScript que inicia uma requisição HTTP assíncrona.

  • 'https://api.exemplo.com/dados' → URL do recurso da API que será acessado.

  • Padrão: → Se você não passar o segundo parâmetro, a requisição será do tipo GET automaticamente.

🧾 .then(response => response.json())

  • fetch() retorna uma Promise, que resolve com um objeto Response.

  • .then(...) → Método usado para lidar com a resposta de forma assíncrona.

  • response.json() → Converte o corpo da resposta (raw text) em JSON. → Também retorna uma nova Promise com os dados prontos para uso.

📦 .then(data => console.log(data))

  • data → Dados da resposta já convertidos em objeto JavaScript.

  • console.log(data) → Exibe os dados no console, útil para ver ou usar a resposta no app.

⚠️ .catch(error => console.error('Erro:', error))

  • .catch(...) → Captura erros que podem ocorrer em qualquer parte da requisição:

    • Falha de rede;

    • Problema na conversão do JSON;

    • Resposta inválida ou não tratada.

  • console.error('Erro:', error) → Mostra o erro no console com uma mensagem clara.

🤓 Métodos de requisição HTTP

🔹 GET

  • Objetivo: Recuperar dados do servidor.

  • Comportamento: Não altera o estado do servidor. É seguro e idempotente*.

  • Exemplo: Buscar a lista de usuários.

  • Uso comum: Leitura de recursos.

GET /usuarios

🔹 POST

  • Objetivo: Enviar dados ao servidor para criação de um novo recurso.

  • Comportamento: Pode alterar o estado do servidor. Não é idempotente.

  • Exemplo: Criar um novo usuário.

  • Uso comum: Criação de dados.

POST /usuarios

🔹 PUT

  • Objetivo: Atualizar completamente um recurso existente.

  • Comportamento: Substitui o recurso inteiro. É idempotente.

  • Exemplo: Atualizar os dados completos de um usuário.

  • Uso comum: Atualização completa de um recurso.

PUT /usuarios/123

🔹 PATCH

  • Objetivo: Atualizar parcialmente um recurso.

  • Comportamento: Apenas os campos enviados são alterados. É idempotente.

  • Exemplo: Alterar somente o email do usuário.

  • Uso comum: Atualização parcial.

PATCH /usuarios/123

🔹 DELETE

  • Objetivo: Remover um recurso.

  • Comportamento: Exclui dados no servidor. É idempotente.

  • Exemplo: Deletar um usuário pelo ID.

  • Uso comum: Remoção de dados.

DELETE /usuarios/123

Observações tradicionais:

  • Idempotência: Significa que fazer a mesma requisição várias vezes terá o mesmo efeito que fazer uma vez só (ex: DELETE, PUT, GET).

  • POST não é idempotente pois pode criar múltiplos recursos se repetido.

  • Sempre use os métodos conforme a semântica original, mantendo uma API previsível e coesa.

Previous9.3 - O que é Json?Next9.2.1 - O que é assíncrono?

Last updated