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
Top comments (0)