web-dev-qa-db-fra.com

Demande Axios Delete avec corps et en-têtes?

J'utilise Axios lors de la programmation dans ReactJS et je fais semblant d'envoyer une demande DELETE à mon serveur.

Pour ce faire, j'ai besoin des en-têtes:

headers: {
  'Authorization': ...
}

et le corps est composé de

var payload = {
    "username": ..
}

J'ai cherché dans les sites Web et seulement constaté que la méthode DELETE nécessite un "param" et n'accepte pas de "données".

J'ai essayé de l'envoyer comme ça:

axios.delete(URL, payload, header);

ou même

axios.delete(URL, {params: payload}, header);

Mais rien ne semble fonctionner ...

Quelqu'un peut-il me dire s'il est possible (je suppose que c'est le cas) d'envoyer une demande DELETE avec les en-têtes et le corps et comment le faire?

Merci d'avance!

javascriptreactjshttpaxioshttp-delete
29
Asfourhundred

Donc, après plusieurs essais, j'ai trouvé que ça fonctionnait.

S'il vous plaît suivez l'ordre dans l'ordre c'est très important sinon cela ne fonctionnera pas

axios.delete(
        URL,
        {headers: {
          Authorization: authorizationToken
        },
        data:{
          source:source
        }}
      );
11
vishu2124

axiox.delete prend en charge un corps de requête. Il accepte deux paramètres: url et optionnel config. Vous pouvez utiliser config.data pour définir le corps de la réponse comme suit:

axios.delete(url, { data: { foo: "bar" } });

Voir ici - https://github.com/axios/axios/issues/897

43
tarzen chugh

Voici un bref résumé des formats requis pour envoyer divers verbes http avec axios:

  • GET: Deux façons

    • Première méthode
    axios.get('/user?ID=12345')
  .then(function (response) {
    // Do something
  })
    • Deuxième méthode
    axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    // Do something
  })

Les deux ci-dessus sont équivalents. Observez le mot clé params dans la deuxième méthode.

  • POST et PATCH
axios.post('any-url', payload).then(
  // payload is the body of the request
  // Do something
)

axios.patch('any-url', payload).then(
  // payload is the body of the request
  // Do something
)
  • DELETE
axios.delete('url', { data: payload }).then(
  // Observe the data keyword this time. Very important
  // payload is the request body
  // Do something
)

Points clés à retenir

  • Les requêtes get nécessitent éventuellement une touche params pour définir correctement les paramètres de requête
  • Les requêtes delete avec un corps doivent être définies sous la touche data
29
Van_Paitin

axios. delete est passé une url et une configuration facultative .

axios.delete (url [ config])

Les champs disponibles pour la configuration peuvent inclure les en-têtes .

Cela fait que l'appel API peut être écrit comme suit:

const headers = {
  'Authorization': 'Bearer paperboy'
}
const data = {
  foo: 'bar'
}

axios.delete('https://foo.svc/resource', {headers, data})
4
Oluwafemi Sule

J'ai eu le même problème, je l'ai résolu comme ça:

axios.delete(url, {data:{username:"user", password:"pass"}, headers:{Authorization: "token"}})
3
ronara

Pour envoyer un HTTP DELETE avec certains en-têtes via axios j'ai fait ceci:

  const deleteUrl = "http//foo.bar.baz";
  const httpReqHeaders = {
    'Authorization': token,
    'Content-Type': 'application/json'
  };
  // check the structure here: https://github.com/axios/axios#request-config
  const axiosConfigObject = {headers: httpReqHeaders}; 

  axios.delete(deleteUrl, axiosConfigObject);

La syntaxe axios de différents verbes HTTP (GET, POST, PUT, DELETE) est délicate car parfois le second paramètre est supposé être le corps HTTP, d'autres fois (quand cela n'est peut-être pas nécessaire) en-têtes en tant que 2ème paramètre.

Cependant, supposons que vous deviez envoyer une requête HTTP POST sans corps HTTP, vous devez ensuite passer undefined en tant que deuxième paramètre.

Gardez à l'esprit que selon la définition de l'objet de configuration ( https://github.com/axios/axios#request-config ), vous pouvez toujours transmettre un corps HTTP à l'appel HTTP via la data lorsque vous appelez axios.delete, cependant, pour le verbe HTTP DELETE, il sera ignoré.

Cette confusion entre le second paramètre étant parfois le corps HTTP et une autre fois tout l'objet config pour axios est due à la manière dont les règles HTTP ont été implémentées. Parfois, un corps HTTP n'est pas nécessaire pour qu'un appel HTTP soit considéré comme valide.

2
TPPZ

Pour supprimer, vous devrez faire comme suit

axios.delete("/<your endpoint>", { data:<"payload object">}})

Cela a fonctionné pour moi.

0
Hemantkumar Gaikwad

J'ai rencontré le même problème ... Je l'ai résolu en créant une instance axios personnalisée. et en utilisant cela pour faire une demande de suppression authentifiée.

const token = localStorage.getItem('token');
const request = axios.create({
        headers: {
            Authorization: token
        }
    });

await request.delete('<your route>, { data: { <your data> }});
0
jimijuu omastar