Médio JavaScript

Enviando dados com POST e JSON

Enunciado

Crie uma função criarPost(titulo, corpo) que envia uma requisição POST para https://jsonplaceholder.typicode.com/posts com um objeto JSON contendo title, body e userId: 1. Exiba o ID do post criado. Trate erros de status e de rede.

Requisitos

  • Usar fetch com método POST.
  • Definir o cabeçalho Content-Type: application/json.
  • Usar JSON.stringify() para converter o objeto em string JSON no corpo.
  • Verificar response.ok e lançar erro se necessário.
  • Exibir Post criado com ID: [id] no console.

Código inicial

async function criarPost(titulo, corpo) {
  // Seu código aqui
}

criarPost('Meu título', 'Conteúdo do post');

Saída esperada

Post criado com ID: 101
Ver dica

No fetch, passe um objeto de opções com method: 'POST', headers e body. Não esqueça de converter o objeto para string com JSON.stringify.

Mostrar solução 
async function criarPost(titulo, corpo) {
  const dados = {
    title: titulo,
    body: corpo,
    userId: 1
  };

  try {
    const resposta = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(dados)
    });

    if (!resposta.ok) {
      throw new Error(`Erro HTTP: ${resposta.status}`);
    }

    const postCriado = await resposta.json();
    console.log(`Post criado com ID: ${postCriado.id}`);
  } catch (erro) {
    console.error('Erro ao criar post:', erro.message);
  }
}

criarPost('Meu título', 'Conteúdo do post');

Passo a passo

  1. Montamos um objeto dados com as propriedades title, body e userId.
  2. Chamamos fetch com a URL e um objeto de configuração: method: 'POST', cabeçalho Content-Type: application/json e body como string JSON.
  3. Usamos JSON.stringify(dados) para converter o objeto em string, pois o corpo da requisição deve ser texto.
  4. Verificamos resposta.ok; se não for ok, lançamos um erro com o status.
  5. Convertemos a resposta para objeto com await resposta.json().
  6. Exibimos o ID do post criado.
  7. O catch captura erros de rede ou o erro lançado.

Por que funciona

O fetch permite enviar dados no corpo da requisição. Para APIs que esperam JSON, é necessário definir o cabeçalho Content-Type: application/json e enviar uma string JSON. O JSON.stringify faz essa conversão. A resposta da API geralmente retorna o objeto criado com um ID, que exibimos.

Erros comuns

  • Esquecer o cabeçalho Content-Type: a API pode não interpretar o corpo como JSON e retornar erro 400.
  • Enviar o objeto diretamente no body: o corpo deve ser string; sem JSON.stringify, o fetch converterá para [object Object].
  • Não verificar resposta.ok: mesmo com status 201 (Created), ok é true, mas se houver erro 400, você precisa tratar.

Outra forma de resolver

Usar uma função auxiliar para requisições:

async function postJSON(url, dados) {
  const resposta = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(dados)
  });
  if (!resposta.ok) throw new Error(`Erro HTTP: ${resposta.status}`);
  return resposta.json();
}

async function criarPost(titulo, corpo) {
  try {
    const post = await postJSON('https://jsonplaceholder.typicode.com/posts', {
      title: titulo,
      body: corpo,
      userId: 1
    });
    console.log(`Post criado com ID: ${post.id}`);
  } catch (erro) {
    console.error('Erro ao criar post:', erro.message);
  }
}

Essa forma é preferível quando você faz várias requisições POST e quer reutilizar código.

Saída esperada

Post criado com ID: 101