# 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.

{% content-ref url="9.2-como-funciona-requisicoes-http/9.2.1-o-que-e-assincrono" %}
[9.2.1-o-que-e-assincrono](https://favelaware.gitbook.io/favelaware/9-api/9.2-como-funciona-requisicoes-http/9.2.1-o-que-e-assincrono)
{% endcontent-ref %}

#### 🧱 Estrutura básica

{% code overflow="wrap" fullWidth="false" %}

```javascript
fetch(url, options)
```

{% endcode %}

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

{% code overflow="wrap" %}

```javascript
fetch('https://api.exemplo.com/dados')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Erro:', error));

```

{% endcode %}

<details>

<summary>☝️🤓 Explicação do exemplo</summary>

#### 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.

</details>

## 🤓 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.