Métodos HTTP da visão de FrontEnd
Tags: http, frontend, javascript, fetch
Published: 2022-04-07 12:47:01

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:

```javascript
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**:

```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:

```javascript
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_:

```javascript
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_:

```javascript
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_:

```javascript
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:

```javascript
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}`

```javascript
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_

--- 

### Links para saber mais!

- [Métodos HTTP - MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods)
- [Os métodos HTTP: quais são e pra que servem - Gabs Ferreira](http://gabsferreira.com/os-metodos-http-e-a-diferenca-entre-eles/)