> For the complete documentation index, see [llms.txt](https://favelaware.gitbook.io/favelaware/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://favelaware.gitbook.io/favelaware/9-api/9.2-como-funciona-requisicoes-http.md).

# 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="/pages/onZK6qkBNqKuhntzxA7h" %}
[9.2.1 - O que é assíncrono?](/favelaware/9-api/9.2-como-funciona-requisicoes-http/9.2.1-o-que-e-assincrono.md)
{% 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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://favelaware.gitbook.io/favelaware/9-api/9.2-como-funciona-requisicoes-http.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.