# 9.4 - Inserindo dados via API (POST)

O método **POST** é utilizado para **enviar dados ao servidor com o objetivo de criar um novo recurso**. Diferente do GET, que apenas busca informações, o POST **modifica o estado do servidor** ao adicionar novos registros. Ele **não é idempotente**, ou seja, enviar a mesma requisição várias vezes pode resultar em múltiplas criações. É amplamente usado em formulários, cadastros e qualquer situação em que se deseja **inserir novos dados** em um sistema.

### 📥 Exemplo com POST — Enviar dados (criar um novo recurso) 

<pre class="language-javascript"><code class="lang-javascript">fetch('https://api.exemplo.com/usuarios', {
  method: 'POST',
<strong>  headers: {
</strong>    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    nome: 'João',
    email: 'joao@example.com'
  })
})
  .then(response => response.json())
  .then(data => console.log('Usuário criado:', data))
  .catch(error => console.error('Erro no POST:', error));


</code></pre>

<details>

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

* `fetch('https://api.exemplo.com/usuarios', {`\
  → Faz uma requisição para o endpoint e passa as **opções da requisição**.
* `method: 'POST',`\
  → Define que o método será **POST** (enviar dados).
* `headers: { 'Content-Type': 'application/json' },`\
  → Define o cabeçalho da requisição, informando que o corpo será em **JSON**.
* `body: JSON.stringify({ nome: 'João', email: 'joao@example.com' })`\
  → Converte o objeto JavaScript em **string JSON** e envia como corpo da requisição.
* `.then(response => response.json())`\
  → Quando a resposta chegar, transforma o corpo da resposta em JSON.
* `.then(data => console.log('Usuário criado:', data))`\
  → Mostra no console os dados retornados pela API (ex: novo usuário criado).
* `.catch(error => console.error('Erro no POST:', error));`\
  → Captura qualquer erro ocorrido e exibe no console.

</details>

### 📌 Exemplo prático

```javascript
fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'Meu título',
    body: 'Conteúdo do post',
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => console.log('Post criado:', data))
  .catch(error => console.error('Erro no POST:', error));

```

### 👣 Explicação passo a passo&#x20;

{% stepper %}
{% step %}

### fetch(url, options)

* A função `fetch` faz uma requisição para o endereço (URL) especificado.
* No nosso caso, a URL é `https://jsonplaceholder.typicode.com/posts`.
* O segundo parâmetro é um objeto com opções que definem como será essa requisição. &#x20;
  {% endstep %}

{% step %}

### **method: 'POST'**

* O método HTTP indica que vamos enviar dados para criar algo novo no servidor.
* `'POST'` significa “criar” ou “enviar dados”.
  {% endstep %}

{% step %}

### headers: { 'Content-Type': 'application/json' }

* Esse cabeçalho informa que o corpo da requisição estará no formato JSON (texto estruturado).
* É importante para o servidor entender como interpretar os dados que recebemos.
  {% endstep %}

{% step %}

### body: JSON.stringify({...})

* O corpo da requisição é o conteúdo que enviamos ao servidor.
* Usamos `JSON.stringify` para converter o objeto JavaScript em uma string JSON.
* No nosso exemplo, enviamos um objeto com os campos `title`, `body` e `userId`.
  {% endstep %}

{% step %}

### .then(response => response.json())

* Quando o servidor responde, pegamos essa resposta (`response`).
* Chamamos `.json()` para converter o corpo da resposta, que também está em JSON, para um objeto JavaScript.
* Isso retorna uma promessa com o resultado convertido.
  {% endstep %}

{% step %}

### .then(data => console.log('Post criado:', data))

* Quando o JSON estiver convertido, executamos essa função que imprime no console o objeto criado pelo servidor.
* Esse objeto normalmente contém os dados enviados, e um campo `id` gerado pelo servidor.
  {% endstep %}

{% step %}

### .catch(error => console.error('Erro no POST:', error))

* Caso algum erro ocorra durante a requisição (ex: problema de conexão), essa função captura o erro.
* Imprime no console uma mensagem indicando que houve um erro.
  {% endstep %}
  {% endstepper %}

### 🏹 Exemplo async/await

```javascript
async function createPost() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        title: 'Meu título',
        body: 'Conteúdo do post',
        userId: 1
      })
    });

    const data = await response.json();
    console.log('Post criado:', data);
  } catch (error) {
    console.error('Erro no POST:', error);
  }
}

createPost();
```

A função `createPost` envia uma requisição `POST` para criar um novo post. Usa `await` para esperar a resposta, converte para JSON e mostra no console os dados do post criado. Se houver erro, ele é capturado pelo `try...catch`.