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)

fetch('https://api.exemplo.com/usuarios', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    nome: 'João',
    email: '[e-mail]'
  })
})
  .then(response => response.json())
  .then(data => console.log('Usuário criado:', data))
  .catch(error => console.error('Erro no POST:', error));

☝️🤓 Explicação do exemplo POST

• 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: '[e-mail]' }) → 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.

📌 Exemplo prático

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

1

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.

2

method: 'POST'

• O método HTTP indica que vamos enviar dados para criar algo novo no servidor.

• 'POST' significa “criar” ou “enviar dados”.

3

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.

4

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.

5

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

6

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

7

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

🏹 Exemplo async/await

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.