Axios Delete request dengan body dan header?


118

Saya menggunakan Axios saat memprogram di ReactJS dan saya berpura-pura mengirim permintaan DELETE ke server saya.

Untuk melakukannya, saya memerlukan header:

headers: {
  'Authorization': ...
}

dan tubuh terdiri dari

var payload = {
    "username": ..
}

Saya telah mencari di antar web dan hanya menemukan bahwa metode DELETE memerlukan "param" dan tidak menerima "data".

Saya sudah mencoba mengirimnya seperti ini:

axios.delete(URL, payload, header);

atau bahkan

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

Tapi sepertinya tidak ada yang berhasil ...

Dapatkah seseorang memberi tahu saya jika memungkinkan (saya anggap demikian) untuk mengirim permintaan HAPUS dengan header dan isi dan bagaimana melakukannya?

Terima kasih sebelumnya!

Jawaban:


144

Jadi setelah beberapa kali mencoba, saya merasa berhasil.

Harap ikuti urutan urutan itu sangat penting kalau tidak itu tidak akan berhasil

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

1
Halo, dapatkah Anda menjelaskan mengapa jawaban Anda berhasil?
Franco Gil

102

axiox.deletetidak mendukung badan permintaan. Ini menerima dua parameter: url dan config opsional. Anda dapat menggunakan config.datauntuk menyetel isi dan header permintaan sebagai berikut:

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

Lihat Di Sini - https://github.com/axios/axios/issues/897


Masalahnya adalah saya ingin mengirim badan dan header dalam permintaan hapus yang sama
Asfourhundred

83

Berikut adalah ringkasan singkat dari format yang diperlukan untuk mengirim berbagai verba http dengan axios:

  • GET: Dua arah

    • Metode pertama

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

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

    Kedua hal di atas setara. Amati paramskata kunci di metode kedua.

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

Pengambilan kunci

  • getpermintaan secara opsional membutuhkan paramskunci untuk menyetel parameter kueri dengan benar
  • deletepermintaan dengan badan memerlukannya untuk disetel di bawah datakunci

11
Jawaban Anda membuat saya berharap ada fitur upvote +2 di stack overflow.
eli-bd

Ini adalah satu-satunya jawaban yang menjelaskannya secara detail. Terima kasih itu sangat membantu dalam memahami orang lain.
Geoff

Bagaimana cara mengirim permintaan delete dengan params, bukan body?
Ajay Singh

Jawaban terbaik untuk pertanyaan ini. Terima kasih.
HartleySan

1
@MaFiA, jika Anda ingin mengirim permintaan hapus dengan params. Anda cukup meletakkannya di url menggunakan string kueri
Van_Paitin

14

axios. delete yaitu melewati url dan konfigurasi opsional .

axios.delete (url [, config])

Bidang yang tersedia untuk konfigurasi dapat menyertakan header .

Ini membuatnya sehingga panggilan API dapat ditulis sebagai:

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

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

Ini tidak bekerja untuk saya ... Saya sudah const headers = {'Authorization': ...}dan data = {'username': ...}berakhir dengan axios.delete('http://...', {headers, data})tetapi server tidak dapat mengakses header ...
Asfourhundred

Permintaan yang keluar dari browser mengatakan berbeda. Lihat Stackblitz ini ( stackblitz.com/edit/react-gq1maa ) dan juga permintaan di tab jaringan browser ( snag.gy/JrAMjD.jpg ). Anda harus yakin di sini bahwa Anda membaca header server side dengan cara yang benar atau bahwa permintaan tidak dicegat dan dirusak.
Oluwafemi Sule

6

Saya memiliki masalah yang sama dengan yang saya selesaikan seperti itu:

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

5

Sebenarnya, axios.deletemendukung badan permintaan.
Ini menerima dua parameter: a URLdan opsional config. Itu adalah...

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

Anda dapat melakukan hal berikut untuk menyetel isi respons untuk permintaan hapus:

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)

Saya harap ini membantu seseorang!


1
Terima kasih, saya menggunakan ini dalam metode delete HttpService nestJs saya sebagai: this.httpService.delete (apiUrl, {headers: headersRequest, data: deleteBody})
shanti

4

Untuk Hapus, Anda perlu melakukan hal berikut

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

Itu berhasil untuk saya.


2

Untuk mengirim HTTP DELETE dengan beberapa header melalui axiossaya telah melakukan ini:

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

The axiossintaks untuk verba HTTP yang berbeda (GET, POST, PUT, DELETE) adalah rumit karena kadang-kadang 2 parameter seharusnya tubuh HTTP, beberapa waktu lain (ketika itu mungkin tidak diperlukan) Anda hanya lulus header sebagai 2 parameter .

Namun, katakanlah Anda perlu mengirim permintaan HTTP POST tanpa badan HTTP, lalu Anda harus meneruskan undefinedsebagai parameter ke-2.

Perlu diingat bahwa menurut definisi objek konfigurasi ( https://github.com/axios/axios#request-config ) Anda masih dapat meneruskan badan HTTP dalam panggilan HTTP melalui kolom datasaat memanggil axios.delete, namun untuk HTTP HAPUS kata kerja itu akan diabaikan.

Kebingungan antara parameter ke-2 ini terkadang merupakan badan HTTP dan di waktu lain seluruh configobjek untuk axiosdisebabkan oleh bagaimana aturan HTTP telah diimplementasikan. Terkadang badan HTTP tidak diperlukan agar panggilan HTTP dianggap valid.


0

Saya mengalami masalah yang sama ... Saya menyelesaikannya dengan membuat instance axios kustom. dan menggunakannya untuk membuat permintaan hapus yang diautentikasi ..

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

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

0

saya menemukan cara yang berhasil:

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

Saya harap ini berhasil juga untuk Anda.


0

Saya mencoba semua cara di atas yang tidak berhasil untuk saya. Saya akhirnya hanya menggunakan PUT (inspirasi ditemukan di sini ) dan baru saja mengubah logika sisi server saya untuk melakukan penghapusan pada panggilan url ini. (ganti fungsi kerangka kerja django).

misalnya

.put(`http://127.0.0.1:8006/api/updatetoken/20`, bayst)
      .then((response) => response.data)
      .catch((error) => { throw error.response.data; });
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.