Como Enviar Requisições POST com JSON e Tratamento de Erros usando fetch Nativo

A API fetch nativa do JavaScript permite realizar requisições HTTP assíncronas sem a necessidade de instalar bibliotecas externas como o Axios. Ao enviar dados para um servidor via método POST, é fundamental serializar o corpo da requisição em JSON e validar manualmente o status da resposta, já que o fetch não lança exceções automaticamente para erros de status HTTP (como 404 ou 500).

JavaScript

/**
 * Realiza uma requisição POST enviando dados no formato JSON
 * @param {string} url - Endereço do endpoint da API
 * @param {Object} data - Objeto JavaScript com os dados a serem enviados
 */
async function criarUsuario(url, data) {
  try {
    const response = await fetch(url, {
      method: 'POST', // Define o método HTTP
      headers: {
        'Content-Type': 'application/json', // Informa ao servidor que o payload é JSON
        'Accept': 'application/json'
      },
      body: JSON.stringify(data) // Converte o objeto JS em string JSON
    });

    // O fetch NÃO rejeita a Promise em status 4xx/5xx; é preciso verificar response.ok
    if (!response.ok) {
      throw new Error(`Erro na requisição HTTP: ${response.status} - ${response.statusText}`);
    }

    const resultado = await response.json(); // Converte a resposta em objeto JS
    console.log('Sucesso ao criar usuário:', resultado);
    return resultado;

  } catch (error) {
    // Captura erros de rede ou a exceção lançada no cheque de response.ok
    console.error('Falha na operação:', error.message);
  }
}

// Exemplo prático de uso
const novoUsuario = {
  nome: 'Lucas Silva',
  email: 'lucas@exemplo.com',
  cargo: 'Desenvolvedor'
};

// Chamada da função utilizando uma API fictícia
criarUsuario('https://jsonplaceholder.typicode.com/posts', novoUsuario);

Pontos-chave

• Validação com response.ok: O fetch só rejeita a Promise em caso de falhas de rede (ex: perda de conexão). Respostas com códigos de erro HTTP (400, 404, 500) retornam com sucesso e exigem que você verifique se response.ok é true.
• Cabeçalho Content-Type: É obrigatório definir 'Content-Type': 'application/json' no objeto headers para que os middlewares e APIs do servidor identifiquem e façam o parse correto do corpo da requisição.
• Serialização de Dados: O parâmetro body aceita dados no formato string; portanto, é necessário passar o objeto JS por meio do JSON.stringify(data) antes do envio.
• Tratamento de Payload Vazio: Caso o servidor retorne status HTTP 204 (No Content), chamar response.json() gerará um erro de sintaxe. Nesses cenários, utilize response.text() ou valide o status antes do parse.