HTTP, status codes e requisições na prática

Introdução

Quando estamos começando a desenvolver aplicações web, com certeza vamos nos deparar com muitos erros, como uma página não carregando devidamente. Uma API não respondendo ou, um dos mais comuns, um formulário falhando sem explicação alguma. Se você está ou já enfrentou algum desses problemas, sem sombra de dúvidas, o problema pode estar em um dos pilares da WEB, o HTTP.

Entender como este protocolo funciona, o que são requisições e respostas, status codes e qual sua importância na internet é fundamental para que no seu futuro, como desenvolvedor, seja front e backend, você tenha uma base sólida e já saiba lidar com erros comuns.

O que é HTTP

Antes de tudo precisamos entender o que significa está sigla. HTTP significa Hypertext Transfer Protocol, ou, em português, Protocolo de Transferência de Hipertexto. É um protocolo usado para estabelecer uma comunicação entre cliente e servidor web.

Que ele transfere textos você já sabe, mas quais são estes textos? Esses textos podem ser o HTML, as estilizações com o CSS, códigos executáveis como o Javascript, Json, XML, dados estruturados de APIs, como arrays e objetos. Imagens, vídeos, áudios, no caso os arquivos binários. Ou, o mais simples, um texto puro, como este.

Agora vou definir de forma simples, o que seria o cliente e o servidor. Bom, o cliente é o navegador do seu celular, de um computador, ou um aplicativo. Já o servidor, é onde a aplicação ou a API está hospedada. Mas e o HTTP, onde entra? Simples, o HTTP faz um intermédio entre o cliente e o servidor.

É como se fosse um serviço de entregas, você faz um pedido (cliente), a empresa responsável processa esse pedido, ou seja, verifica se há estoque, o modelo, cor e os detalhes deste pedido. Após o processamento ela te entrega o que você solicitou. O meio de entrega que você selecionou é o HTTP. Ou seja, ele é o serviço de entregas.

Na prática, quando você entra num site e vai fazer login, ao clicar no botão de login uma requisição HTTP é feita.

E como funciona uma requisição HTTP?

Uma requisição HTTP possui quatro partes principais, o método, URL, Headers e o Body que é opcional.

• Método: é o que define a ação desejada sobre o recurso. Se você quer apagar, criar, ou editar algo, por exemplo.
• URL: indica onde o recurso está localizado. Exemplo:

1https://cleanstack.com.br/api/posts/43

• Headers: são os metadados da requisição. Informam o formato, autenticação e contexto.
• Body (opcional): são os dados enviados ao servidor. Usado em POST, PUT e PATCH. exemplo:

1{
2  name: 'Guilherme Braga',
3  mensagem: 'Olá, leitores do Clean Stack!'
4}

No final, sua requisição ficará assim:

Métodos HTTP mais usados

Os métodos indicam o que você quer fazer, como buscar algo, criar, deletar etc. Vou mostrar os mais comuns e mais utilizados.

• GET - Buscar dados. Exemplo: carregar uma página ou listar usuários;
• POST - Enviar dados. Exemplo: criar um usuário ou enviar um formulário;
• PUT - Atualizar um recurso inteiro;
• PATCH - Atualizar parte de um recurso;
• DELETE - Remover um recurso.

Ah, uma observação muito importante. Quando comecei a desenvolver aplicações web, eu procurava aprender por conta própria, então entrei em um curso que só utilizava GET e POST. Para projetos iniciais basta, mas não é recomendado e nem eu recomendo vocês começarem assim. Já comecem utilizando de forma correta, pois pode te atrapalhar no futuro.

O que são headers

Headers são os metadados da requisição. Onde é informado para o servidor detalhes importantes. Como os abaixo:

• Tipo de conteúdo (application/json)
• Token de autenticação
• Idioma
• Informações do navegador

É bem difícil você precisar criar headers manualmente no início, mas é bom saber que eles existem. Pois com certeza você vai precisar configurar algum um dia.

O body da requisição

O body nada mais são os dados que estão sendo enviados. É comum que seja um JSON, mas pode ser arquivos de texto, html, binários etc. Como o próprio nome diz, é o corpo da requisição. Normalmente são enviadas em requisições POST, PUT ou PATCH. Aqui vai alguns exemplos:

• Dados de login
• Informações de cadastro
• Conteúdo de um formulário

O que são status codes

E os status codes, o que são? Simples, é uma forma de o servidor nos dizer o que aconteceu com o nosso pedido, nossa requisição. Se houve uma falha e de onde ele pode ter surgido, ou se houve sucesso, e qual o tipo de sucesso.

Eles sempre vem acompanhando a resposta HTTP. Servem como uma maneira de debugar e analisar a lógica da aplicação.

Esses códigos vêm da definição oficial do protocolo, e são padronizado pela Internet Engineering Task Force (IETF) - organização internacional que cria padrões da internet - através do Request For Comments, RFC -documentos técnicos oficiais que descrevem como protocolos devem funcionar.

Os códigos são divididos por categoria. Vou deixar abaixo os mais utilizados, que normalmente cobrem a maioria dos cenários reais.

Status codes 2xx - Sucesso

Indica que a requisição funcionou normalmente. Geralmente está tudo certo.

• 200 Ok Requisição bem sucedida.
• 201 Created Recurso criado com sucesso. POST.
• 204 No Content Sucesso sem corpo de resposta.

Status codes 3xx - Redirecionamento

Indicam que o recurso foi movido. Pode ser que tenha mudado de endereço. É mais comum na navegação de páginas, difícil de usar estes códigos em APIs.

• 301 Moved PermanentlyRedirecionamento permanente.
• 302 FoundRedirecionamento temporário.
• 304 Not ModifiedCache válido. Sem novo conteúdo.

Status codes 4xx – Erro do cliente

Aqui indica que há algum erro na requisição enviada. É comum que aconteça durante a fase de desenvolvimento.

• 400 Bad RequestDados inválidos ou mal formatados
• 401 UnauthorizedFalta autenticação
• 403 ForbiddenAutenticado, mas sem permissão
• 404 Not FoundRecurso não encontrado

Status codes 5xx – Erro do servidor

No caso dos status codes 5xx, indicam que há algum problema no servidor. Quase sempre quando encontramos esses erros o nosso código do backend precisa ser revisado.

• 500 Internal Server ErrorErro genérico no backend
• 502 Bad GatewayProblema entre servidores
• 503 Service UnavailableServiço indisponível

HTTP na prática com APIs

Em APIs REST, se usarmos corretamente os métodos e os status codes, deixamos nossa aplicação muito mais clara e previsível. Facilitando o debug, a manutenção e a integração com o frontend.

Veja alguns exemplos:

• GET /users → 200
• POST /users → 201
• GET /users/999 → 404
• POST /login com senha errada → 401

Como testar requisições HTTP

Normalmente, para testar as requisições HTTP usamos de algumas ferramentas. Eu vou deixar aqui abaixo as mais comuns:

• Navegador (DevTools)
• Postman
• Insomnia
• Fetch ou Axios no código

Uma coisa muito importante para nós devs e interessados é a aba Network do navegador, quando se aprende ler você pode analisar a performance, debugar mais rápido e muito mais. Quem sabe eu não escreva sobre isso futuramente. Se eu escrever vou deixar o link para vocês caso eu lembre.

Erros comuns de iniciantes

Aqui estão os erros mais comuns quando se está iniciando com o HTTP ou quando não tem nenhum conhecimento dos fundamentos do protocolo:

• Ignorar status codes e tratar tudo como sucesso;
• Usar GET e POST para tudo - como eu havia mencionado;

• Retornar sempre status 200 e 500 para sucesso e erro;
• Não validar dados antes de processar;
• Não tratar erros no frontend.

Conclusão

Sabendo mais sobre esse protocolo, nós podemos concluir que ele é a base da web moderna. Quem domina as requisições e os status code, claramente entenderá melhor o comportamento das aplicações, vai conseguir debugar mais rápido e escrever um código muito mais profissional.

O HTTP nem é um assunto tão avançado assim, e é muito simples de entender e essencial para nós programadores. Quanto mais cedo você aprender sobre melhor será para sua evolução como desenvolvedor.