Axios Anfrage mit Body und Headern löschen?

Ich verwende Axios während der Programmierung in ReactJS und gebe vor, eine DELETE-Anfrage an meinen Server zu senden.

Dazu brauche ich die Header:

headers: {
  'Authorization': ...
}

und der Körper besteht aus

var payload = {
    "username": ..
}

Ich habe in den Interwebs gesucht und nur festgestellt, dass die DELETE-Methode einen "Parameter" erfordert und keine "Daten" akzeptiert.

Ich habe versucht, es so zu senden:

axios.delete(URL, payload, header);

oder auch

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

Aber nichts scheint zu funktionieren ...

Kann mir jemand sagen, ob es möglich ist (ich nehme an, dass es möglich ist), eine DELETE-Anfrage mit Headern und Body zu senden, und wie das geht?

Danke im Voraus!

Nach einigen Versuchen fand ich es funktioniert.

Bitte folgen Sie der Reihenfolge, es ist sehr wichtig, sonst funktioniert es nicht

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

axiox.deleteunterstützt einen Anforderungshauptteil. Es werden zwei Parameter akzeptiert: URL und optionale Konfiguration. Sie können config.dataden Anforderungshauptteil und die Header wie folgt festlegen:

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

Siehe hier - https://github.com/axios/axios/issues/897

Hier ist eine kurze Zusammenfassung der Formate, die zum Senden verschiedener http-Verben mit Axios erforderlich sind:

• GET: Zwei Wege

  • Erste Methode

    axios.get('/user?ID=12345')
      .then(function (response) {
        // Do something
      })
    

  • Zweite Methode

    axios.get('/user', {
        params: {
          ID: 12345
        }
      })
      .then(function (response) {
        // Do something
      })
    

  Die beiden oben genannten sind gleichwertig. Beachten Sie das paramsSchlüsselwort in der zweiten Methode.

• POST und 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
  )
  

Die zentralen Thesen

• getAnfragen benötigen optional einen paramsSchlüssel, um die Abfrageparameter richtig einzustellen
• deleteAnfragen mit einem Körper müssen unter einem dataSchlüssel gesetzt werden

Axios. Löschen wird eine URL und eine optionale Konfiguration übergeben .

axios.delete (url [, config])

Die für die Konfiguration verfügbaren Felder können die Header enthalten .

Dadurch kann der API-Aufruf wie folgt geschrieben werden:

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

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

Ich hatte das gleiche Problem, das ich so gelöst habe:

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

Tatsächlich axios.deleteunterstützt eine Anfrage Körper.
Es werden zwei Parameter akzeptiert: a URLund optional config. Das ist...

axios.delete(url: string, config?: AxiosRequestConfig | undefined)

Sie können den Antworttext für die Löschanforderung wie folgt festlegen:

let config = { 
    headers: {
        Authorization: authToken
    },
    data: { //! Take note of the `data` keyword. This is the request body.
        key: value,
        ... //! more `key: value` pairs as desired.
    } 
}

axios.delete(url, config)

Ich hoffe das hilft jemandem!

Zum Löschen müssen Sie wie folgt vorgehen

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

Es hat bei mir funktioniert.

Um ein HTTP DELETE mit einigen Headern über zu senden, axioshabe ich Folgendes getan:

  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);

Die axiosSyntax für verschiedene HTTP-Verben (GET, POST, PUT, DELETE) ist schwierig, da der 2. Parameter manchmal der HTTP-Body sein soll. In anderen Fällen (wenn er möglicherweise nicht benötigt wird) übergeben Sie einfach die Header als 2. Parameter .

Angenommen, Sie müssen eine HTTP-POST-Anforderung ohne HTTP-Body senden und dann undefinedals zweiten Parameter übergeben.

Beachten Sie, dass Sie gemäß der Definition des Konfigurationsobjekts ( https://github.com/axios/axios#request-config ) databeim Aufrufen weiterhin einen HTTP-Body im HTTP-Aufruf über das Feld übergeben können axios.delete, jedoch für das HTTP DELETE Verb wird ignoriert.

Diese Verwechslung zwischen dem zweiten Parameter, der manchmal der HTTP-Body ist, und einem anderen Zeitpunkt, für den das gesamte configObjekt axiosist, ist darauf zurückzuführen, wie die HTTP-Regeln implementiert wurden. Manchmal wird kein HTTP-Body benötigt, damit ein HTTP-Aufruf als gültig angesehen wird.

Ich bin auf dasselbe Problem gestoßen ... Ich habe es gelöst, indem ich eine benutzerdefinierte Axios-Instanz erstellt habe. und damit eine authentifizierte Löschanforderung stellen ..

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

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

Ich habe all das ausprobiert, was bei mir nicht funktioniert hat. Am Ende habe ich mich nur für PUT entschieden (Inspiration hier ) und meine serverseitige Logik geändert, um einen Löschvorgang für diesen URL-Aufruf durchzuführen. (Django Rest Framework Funktion überschreiben).

z.B

.put(`http://127.0.0.1:8006/api/updatetoken/20`, bayst)
      .then((response) => response.data)
      .catch((error) => { throw error.response.data; });

Ich habe einen Weg gefunden, der funktioniert:

axios
      .delete(URL, {
        params: { id: 'IDDataBase'},
        headers: {
          token: 'TOKEN',
        },
      }) 
      .then(function (response) {
        
      })
      .catch(function (error) {
        console.log(error);
      });

Ich hoffe diese Arbeit auch für dich.