Como fazer um DELETE com Axios utilizando body e headers

Neste artigo você aprenderá a como fazer um DELETE com Axios, utilizaremos outros recursos como cabeçalho e corpo de requisição

Fala programador(a), beleza? Bora aprender mais sobre Axios!

Introdução

O Axios é uma biblioteca JavaScript amplamente utilizada para realizar requisições HTTP de forma simples e eficiente.

Neste artigo, você aprenderá como fazer uma requisição DELETE utilizando o Axios, incluindo a adição de informações no body e headers da requisição.

Passo 1: Instalar o Axios

Se você ainda não tem o Axios em seu projeto, instale-o usando npm ou yarn:

npm install axios

ou

yarn add axios

Passo 2: Importar o Axios

No arquivo em que você deseja realizar a requisição DELETE, importe o Axios:

import axios from 'axios';

Passo 3: Realizar a requisição DELETE com Axios

Agora que você importou o Axios, é possível realizar a requisição DELETE.

No exemplo abaixo, mostramos como fazer uma exclusão com Axios, incluindo o envio de informações no body e headers da requisição:

const deleteData = async () => {
  try {
    // Defina a URL do recurso que você deseja excluir
    const url = 'https://example.com/api/resource';

    // Crie um objeto com as informações que você deseja enviar no body da requisição
    const data = {
      id: 1,
      reason: 'Exemplo de motivo para exclusão',
    };

    // Crie um objeto com as informações que você deseja enviar nos headers da requisição
    const headers = {
      'Content-Type': 'application/json',
      Authorization: 'Bearer your-access-token',
    };

    // Realize a requisição DELETE com Axios
    const response = await axios.delete(url, { data, headers });

    // Trate a resposta da requisição, caso necessário
    console.log(response.data);
  } catch (error) {
    // Trate os erros na requisição
    console.error('Erro ao realizar a requisição DELETE:', error);
  }
};

// Chame a função para executar a requisição
deleteData();

Neste exemplo, utilizamos uma função assíncrona chamada deleteData para realizar a requisição DELETE com Axios.

A função envia informações no body e headers da requisição, e trata as respostas e erros conforme necessário.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Neste artigo, você aprendeu como fazer um DELETE com Axios, incluindo o envio de informações no body e headers da requisição.

O Axios torna mais fácil trabalhar com requisições HTTP em seus projetos JavaScript, e o exemplo fornecido pode ser facilmente adaptado para atender às suas necessidades específicas.

Lembre-se de sempre tratar as respostas e erros adequadamente para garantir a melhor experiência do usuário e a robustez do seu aplicativo.

Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.

Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!

O DELETE mais simples com Axios:

Antes de complicar, vamos pelo caso mais comum de todos

Na maioria das APIs REST tu não precisa mandar corpo nenhum pra excluir algo, o identificador do recurso já vai na própria URL

import axios from 'axios';

const response = await axios.delete('https://example.com/api/resource/1');

console.log(response.data);

É isso, uma linha e o recurso vai embora

Se a tua API funciona assim, tu já pode parar por aqui =)

Agora, se ela exige informações extras no corpo da requisição ou um token no cabeçalho, segue pro Passo 3 que é ali que a coisa fica diferente do POST

Por que o body vai dentro de data?

Repara com calma no segundo argumento do axios.delete

Ele não é o corpo da requisição, ele é um objeto de configuração

Por isso o corpo entra na chave data e o cabeçalho entra na chave headers, exatamente como está no exemplo acima

await axios.delete(url, { data, headers });

É como entregar um envelope pro Axios: tudo vai dentro do envelope de configuração, cada coisa na sua etiqueta

Tome cuidado! O que tu colocar solto, fora da chave data, o Axios vai ler como configuração e não como corpo da requisição

Esse detalhe é o motivo número 1 de gente jurando que "o Axios não manda body no DELETE"

E se eu não uso async/await?

O mesmo DELETE funciona no formato de promise, se o teu projeto for mais antigo ou tu preferir encadear

axios
.delete(url, { data, headers })
.then((response) => {
console.log(response.data);
})
.catch((error) => {
console.error('Erro ao realizar a requisição DELETE:', error);
});

Muda só a roupa, a lógica é a mesma: URL, configuração com data e headers, tratamento do sucesso e do erro

Erros comuns ao fazer DELETE com Axios:

Já me ferrei com quase todos eles, então se liga na listinha antes de abrir issue na API dos outros haha

O corpo não chega no servidor

Confere se ele está mesmo dentro da chave data do objeto de configuração, e não solto como segundo argumento

A API simplesmente ignora o que tu mandou no corpo

Nem toda API lê corpo em requisição DELETE, muitas esperam só o identificador na URL

Vale abrir a documentação da API que tu está chamando antes de culpar o Axios

Erro de autenticação

O token vai em headers, e o formato dele (prefixo, nome do cabeçalho) é o que a tua API define, não o que o exemplo genérico define

Funciona no terminal mas quebra no navegador

Aí provavelmente o assunto não é o Axios, é permissão do servidor pro teu domínio

Teste a mesma chamada fora do navegador pra separar as coisas

A resposta vem vazia

Algumas APIs não devolvem conteúdo depois de excluir, então response.data pode vir vazio mesmo com tudo certo

Nesse caso, use o próprio sucesso da requisição (o try não caiu no catch) como sinal de que deu bom

Perguntas frequentes sobre DELETE com Axios:

Dá pra enviar body em uma requisição DELETE com Axios?

Dá sim, basta colocar o corpo na chave data do objeto de configuração, que é o segundo argumento do axios.delete

Quem decide se vai usar esse corpo é a API do outro lado

Como envio um token de autenticação no DELETE?

No mesmo objeto de configuração, dentro da chave headers, junto (ou não) com o data

Preciso de body pra excluir um recurso?

Na maior parte das APIs REST, não

O identificador vai na URL e o corpo fica de fora, o body entra quando a API pede informação extra, tipo um motivo da exclusão

Como sei se a exclusão deu certo?

Se o await passou sem cair no catch, a requisição foi aceita

O conteúdo da resposta em response.data varia de API pra API e pode até vir vazio

Como trato o erro direito?

Sempre dentro do catch, mostrando a informação do erro em vez de engolir em silêncio

Erro engolido é bug que volta em produção, e volta no pior dia possível