Axios Usunąć żądanie z treścią i nagłówkami?

119

Używam Axios podczas programowania w ReactJS i udaję, że wysyłam żądanie DELETE do mojego serwera.

Aby to zrobić, potrzebuję nagłówków:

headers: {
  'Authorization': ...
}

a ciało składa się z

var payload = {
    "username": ..
}

Szukałem w Internecie i stwierdziłem tylko, że metoda DELETE wymaga „param” i nie przyjmuje żadnych „danych”.

Próbowałem to wysłać tak:

axios.delete(URL, payload, header);

lub nawet

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

Ale wydaje się, że nic nie działa ...

Czy ktoś może mi powiedzieć, czy jest możliwe (przypuszczam, że jest) wysłanie żądania DELETE z nagłówkami i treścią i jak to zrobić?

Z góry dziękuję!

Czterysta
źródło

Odpowiedzi:

145

Więc po wielu próbach okazało się, że działa.

Proszę postępować zgodnie z kolejnością kolejności , jest bardzo ważne, bo inaczej nie zadziała

axios.delete(URL, {
  headers: {
    Authorization: authorizationToken
  },
  data: {
    source: source
  }
});
vishu2124
źródło
2
Witam, czy możesz wyjaśnić, dlaczego Twoja odpowiedź działa?
Franco Gil
102

axiox.deleteobsługuje treść żądania. Akceptuje dwa parametry: url i opcjonalną konfigurację. Możesz użyć, config.dataaby ustawić treść żądania i nagłówki w następujący sposób:

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

Zobacz tutaj - https://github.com/axios/axios/issues/897

tarzen chugh
źródło
Chodzi o to, że chcę wysłać
treść
83

Oto krótkie podsumowanie formatów wymaganych do wysyłania różnych czasowników http z axios:

  • GET: Dwie drogi

    • Pierwsza metoda

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

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

    Dwa powyższe są równoważne. Obserwuj paramssłowo kluczowe w drugiej metodzie.

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

Kluczowe wnioski

  • getżądania opcjonalnie wymagają paramsklucza do prawidłowego ustawienia parametrów zapytania
  • deleteżądania z treścią muszą być ustawione pod datakluczem
Van_Paitin
źródło
11
Twoja odpowiedź sprawia, że ​​żałuję, że przy przepełnieniu stosu nie było możliwości głosowania za +2.
eli-bd
To jedyna odpowiedź, która szczegółowo to wyjaśnia. Dzięki temu naprawdę pomogło w zrozumieniu nawet innych.
Geoff,
Jak wysłać żądanie usunięcia z parametrami, a nie treścią?
Ajay Singh
Najlepsza odpowiedź na to pytanie. Dziękuję Ci.
HartleySan,
1
@MaFiA, jeśli chcesz wysłać żądanie usunięcia z params. Możesz po prostu umieścić go w
adresie
14

axios. Usuwanie znaczy przeszły URL i opcjonalnej konfiguracji .

axios.delete (url [, config])

Pola dostępne w konfiguracji mogą zawierać nagłówki .

To sprawia, że ​​wywołanie API można zapisać jako:

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

axios.delete('https://foo.svc/resource', {headers, data})
Oluwafemi Sule
źródło
To nie działa dla mnie ... Mam const headers = {'Authorization': ...}i data = {'username': ...}kończy się, axios.delete('http://...', {headers, data})ale serwer nie może uzyskać dostępu do nagłówków ...
Asfourh 100
Żądanie wychodzące z przeglądarki mówi inaczej. Zobacz ten Stackblitz ( stackblitz.com/edit/react-gq1maa ), a także żądanie w zakładce sieci przeglądarki ( snag.gy/JrAMjD.jpg ). Musisz być pewien, że czytasz nagłówki po stronie serwera we właściwy sposób lub że żądanie nie jest przechwytywane i modyfikowane.
Oluwafemi Sule
6

Miałem ten sam problem, który rozwiązałem w ten sposób:

axios.delete(url, {data:{username:"user", password:"pass"}, headers:{Authorization: "token"}})
ronara
źródło
5

Właściwie axios.deleteobsługuje treść żądania.
Akceptuje dwa parametry: a URLi opcjonalny config. To jest...

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

Aby ustawić treść odpowiedzi dla żądania usunięcia, możesz wykonać następujące czynności:

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)

Mam nadzieję, że to komuś pomoże!

ThunderBird
źródło
1
Dzięki, używam tego w mojej metodzie usuwania NestJs HttpService jako: this.httpService.delete (apiUrl, {headers: headersRequest, data: deleteBody})
shanti
4

Aby usunąć, musisz wykonać następujące czynności

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

U mnie to zadziałało.

Hemantkumar Gaikwad
źródło
2

Aby wysłać HTTP DELETE z kilkoma nagłówkami przez axios, zrobiłem to:

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

axiosSkładni dla różnych czasowników HTTP (GET, POST, PUT, DELETE) jest trudne, ponieważ czasami 2nd parametr ma być ciało HTTP, niektóre inne czasy (kiedy to może nie być potrzebne) po prostu przekazać nagłówki w 2-gim parametrze .

Załóżmy jednak, że musisz wysłać żądanie HTTP POST bez treści HTTP, a następnie musisz przekazać undefinedjako drugi parametr.

Należy pamiętać, że zgodnie z definicją obiektu konfiguracyjnego ( https://github.com/axios/axios#request-config ) nadal można przekazać treść HTTP w wywołaniu HTTP przez datapole podczas wywołania axios.delete, jednak dla HTTP DELETE czasownik zostanie zignorowany.

To zamieszanie między drugim parametrem będącym czasami treścią HTTP, a innym razem całym configobiektem axioswynika z tego, jak zostały zaimplementowane reguły HTTP. Czasami treść HTTP nie jest potrzebna, aby wywołanie HTTP zostało uznane za prawidłowe.

TPPZ
źródło
0

Napotkałem ten sam problem ... rozwiązałem go, tworząc niestandardową instancję axios. i używając go do wysłania uwierzytelnionego żądania usunięcia.

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

await request.delete('<your route>, { data: { <your data> }});
jimijuu omastar
źródło
0

znalazłem sposób, który działa:

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

Mam nadzieję, że to zadziała również dla Ciebie.

Damian Guilisasti
źródło
0

Wypróbowałem wszystkie powyższe, które nie zadziałały. Skończyło się na tym, że po prostu poszedłem z PUT (inspiracja znaleziona tutaj ) i właśnie zmieniłem logikę po stronie serwera, aby wykonać usunięcie tego wywołania adresu URL. (nadpisanie funkcji frameworka django rest).

na przykład

.put(`http://127.0.0.1:8006/api/updatetoken/20`, bayst)
      .then((response) => response.data)
      .catch((error) => { throw error.response.data; });
Josh
źródło