Métodos HTTP da visão de FrontEnd

Nesse post vou apresentar os métodos HTTP do ponto de vista de pessoas que trabalham com FrontEnd utilizando o Fetch API do JavaScript para consumir uma API.

➡️ Introdução

Imagine que você precisa criar uma apliacação com 4 funcionalidades, de criar, ler, atualizar e deletar os dados de um usuário. Essas 4 funcionalidades também são conhecidas como CRUD (Create, Read, Update e Delete).

Esse é um exemplo de como é a estrutura do nosso usuário na aplicação:

const user = {
  email: 'marco@gmail.com',
  nickname: 'marcobrunodev',
  streamer: true
}

Felizmente você tem uma API (Application Programming Interface) e poderá enviar os dados do usuário para a rota (recurso) a seguir: /user.

Outra coisa feliz é que você tem 5 métodos HTTP que estão disponíveis nessa rota /user, sendo eles:

1️⃣ Get (Consumir/Pegar)
2️⃣ Post (Publicar/enviar)
3️⃣ Put (Colocar/guardar)
4️⃣ Patch (Correção/remendo)
5️⃣ Delete (Deletar/remover)

Pra que servem esses métodos? 🤨

1️⃣ Get (Consumir/Pegar)

No momento que você consumir a API na rota /user utilizando o método Get ela retornará para você a lista de usuários cadastrados na plataforma, portanto esse método é utilizando para leitura dos dados.

A seguir um exemplo de como consumir a API utilizando o Fetch API com JavaScript:

fetch(`https://marcobruno.dev/user`,)
  .then((res) => res.json())
  .then((user) => {
    console.log('User', user)
  })
  .catch((error) => {
    console.log('Error', error)
  })

Se você precisar apenas dos dados de um usuário, é necessário passar um UUID (Universally unique identifier) na rota /user/{uuid}, mas o método utilizado continua sendo o Get.

A seguir um exemplo de como você pode usar o Fetch API do JavaScript para consumir uma API passando o UUID na rota:

const uuid = 'dhyu87jk25pd9ol27d9nbvpl97yhdghwedm0'

fetch(`https://marcobruno.dev/user/${uuid}`,)
  .then((res) => res.json())
  .then((user) => {
    console.log('User', user)
  })
  .catch((error) => {
    console.log('Error', error)
  })

Podemos ver que o Get é utilizado para leitura dos dados em diferentes situações!

2️⃣ Post (Publicar/enviar)

O método Post utilizamos quando precisamos salvar um novo usuário na aplicação, portanto é necessário passar todos os dados do usuário no body (corpo) da requisição para a rota /user.

Esse é um exemplo de código de como salvar um dado em uma API utilizando a Fetch API com o método Post:

const uuid = 'dhyu87jk25pd9ol27d9nbvpl97yhdghwedm0'
const user = {
  email: 'marco@gmail.com',
  nickname: 'marcobrunodev',
  streamer: true
}

fetch(`https://marcobruno.dev/user/${uuid}`,{
  method: 'POST',
  body: JSON.stringify(user),
  headers: {
    'Content-Type': 'application/json; charset=UFT-8'
  }
})
  .then((res) => res.json())
  .then((user) => {
    console.log('User', user)
  })
  .catch((error) => {
    console.log('Error', error)
  })

Toda vez que precisar salvar algo utilizando uma API o correto é utilizar o método Post.

3️⃣ Put (Colocar/guardar)

Se precisamos atualizar os dados de um usuário utilizamos o método Put e precisamos enviar todos os dados dele no body da requisição e o *️⃣ UUID (Universally unique identifier) é algo que não pode faltar.

A seguir um exemplo de como usar o método Put passando o UUID no body da requisição com Fetch API:

const uuid = 'dhyu87jk25pd9ol27d9nbvpl97yhdghwedm0'
const user = {
  uuid,
  email: 'new_email_marco@gmail.com',
  nickname: 'marcobrunodev',
  streamer: true
}

fetch(`https://marcobruno.dev/user`,{
  method: 'PUT',
  body: JSON.stringify(user),
  headers: {
    'Content-Type': 'application/json; charset=UFT-8'
  }
})
  .then((res) => res.json())
  .then((user) => {
    console.log('User', user)
  })
  .catch((error) => {
    console.log('Error', error)
  })

Mesmo que você esteja atualizando apenas 1 campo de 3 campos que o usuário possui, ainda sim é necessário enviar todos os campos no body da requisição, gostando ou não esse é um padrão adotado quando estamos usando o método Put.

Agora um exemplo de como fica o código quando você está passando o UUID na rota da requisição utilizando o método Put com Fetch API:

const uuid = 'dhyu87jk25pd9ol27d9nbvpl97yhdghwedm0'
const user = {
  email: 'new_email_marco@gmail.com',
  nickname: 'marcobrunodev',
  streamer: true
}

fetch(`https://marcobruno.dev/user/${uuid}`,{
  method: 'PUT',
  body: JSON.stringify(user),
  headers: {
    'Content-Type': 'application/json; charset=UFT-8'
  }
})
  .then((res) => res.json())
  .then((user) => {
    console.log('User', user)
  })
  .catch((error) => {
    console.log('Error', error)
  })

Podemos concluir que utilizamos o método Put para atualizar dados de um recurso que no nosso exemplo foi o do usuário de aplicação.

4️⃣ Patch (Correção/remendo)

Esse método também utilizamos para atualizar o usuário, portanto segue as mesmas regras do método Put, a diferença é que não precisamos passar todos os campos no body da requisição.

Usando o Patch podemos informar apenas o campo que estamos atualizando e o UUID para informar qual usuário tem que ser atualizado, como podemos ver no exemplo a seguir:

const uuid = 'dhyu87jk25pd9ol27d9nbvpl97yhdghwedm0'
const user = {
  uuid,
  email: 'new_email_marco@gmail.com',
}

fetch(`https://marcobruno.dev/user/`,{
  method: 'PATCH',
  body: JSON.stringify(user),
  headers: {
    'Content-Type': 'application/json; charset=UFT-8'
  }
})
  .then((res) => res.json())
  .then((user) => {
    console.log('User', user)
  })
  .catch((error) => {
    console.log('Error', error)
  })

Se você estava triste com o método Put agora ficou feliz com o método Patch. A pergunta de você se deve fazer é: Porque existe o Put se o Patch parece mais simples de usar?

Detalhe essa perguntar não vou responder, deixe nos comentários a sua resposta!

5️⃣ Delete (Deletar/remover)

Quando precisamos remover um usuário da aplicação utilizamos o metódo Delete e precisamos informar o UUID na rota: /user/{uuid}

const uuid = 'dhyu87jk25pd9ol27d9nbvpl97yhdghwedm0'

fetch(`https://marcobruno.dev/user/${uuid}`,{
  method: 'DELETE',
})
  .then((res) => res.json())
  .then((user) => {
    console.log('User', user)
  })
  .catch((error) => {
    console.log('Error', error)
  })

*️⃣ UUID (Universally unique identifier - Identificador universalmente único)

O padrão é ser uma string alfanumérica de 36 caracteres que pode ser usada para identificar informações.

‼️IMPORTANTE‼️

Existem mais outros 4 métodos HTTP que utilizamos menos no nosso dia a dia, mas que vale você estudar também 😍

➡️ Head
➡️ Connect
➡️ Options
➡️ Trace

Blog

Métodos HTTP da visão de FrontEnd

Marco Bruno 🤡