POST e envio de dados
Envie cargas JSON com opções de requisição.
POST e envio de dados é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.
Enviando Dados para um Servidor
Para criar ou atualizar dados, envie uma solicitação com um corpo. O mecanismo de requisições oferece suporte a isso por meio do objeto de opções passado como segundo argumento.
Definindo o Método
Defina method com o verbo HTTP necessário: POST para criar, PUT/PATCH para atualizar e DELETE para remover.
fetch(url, { method: "POST" });Adicionando um Corpo JSON
A maioria das APIs espera JSON. Converta seu objeto em texto com JSON.stringify e coloque-o em body.
fetch(url, {
method: "POST",
body: JSON.stringify({ name: "Ada", age: 36 })
});O Cabeçalho Content-Type
Informe ao servidor que o corpo está em JSON definindo Content-Type: application/json. Sem isso, o servidor pode interpretar os dados enviados incorretamente.
fetch(url, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: "Ada" })
});Lendo a Resposta
O servidor normalmente responde com o recurso created. Leia-o da mesma forma que uma resposta GET, usando response.json().
const response = await fetch(url, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload)
});
const created = await response.json();Uma Função Completa de Criação
Reúna o padrão em uma função reutilizável. Ela aceita dados, envia-os e retorna a resposta do servidor.
async function createUser(data) {
const res = await fetch("/api/users", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data)
});
return res.json();
}PUT e PATCH
Use PUT para substituir um recurso por completo e PATCH para atualizar apenas alguns campos. Consequentemente, o formato do corpo também é diferente.
fetch("/api/users/7", {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ age: 37 })
});Enviando dados de formulário
Para enviar arquivos ou formulários, use um objeto FormData como corpo. NÃO defina o tipo de conteúdo por conta própria; o navegador adiciona o limite multipart correto.
const form = new FormData();
form.append("avatar", fileInput.files[0]);
fetch("/upload", { method: "POST", body: form });Autenticação
Os endpoints protegidos precisam de credenciais. Envie um token no cabeçalho de autorização junto com o tipo de conteúdo.
fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + token
},
body: JSON.stringify(data)
});Cookies e credenciais
Por padrão, uma solicitação não envia cookies entre origens diferentes. Defina credentials: "include" quando o servidor usar sessões baseadas em cookies.
fetch(url, { method: "POST", credentials: "include", body: payload });Armadilhas de stringify
Lembre-se: body deve ser uma string (ou um FormData/Blob). Passar um objeto bruto envia [object Object]. Sempre aplique JSON.stringify primeiro aos objetos.
body: JSON.stringify({ ok: true }) // correct
// body: { ok: true } <-- brokenVerificação rápida
Enviando JSON com POST.
Recapitulação
Envie dados definindo method, um body e cabeçalhos. Para JSON, aplique JSON.stringify ao objeto e defina Content-Type: application/json. Use FormData para envios de arquivos (sem definir manualmente o tipo de conteúdo), adicione Authorization para autenticação e use credentials: "include" para cookies. Leia a resposta com response.json().
Perguntas Frequentes
A aula “POST e envio de dados” é grátis?
Sim — o texto completo de “POST e envio de dados” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.
O que vou aprender em “POST e envio de dados”?
Envie cargas JSON com opções de requisição. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar JavaScript Academy?
Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “POST e envio de dados”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de JavaScript Academy?
Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Fazendo requisições GET
- POST e envio de dados
- Tratando erros e códigos de status
- Cancelando requisições com AbortController