Axios Delete request dengan body dan header?

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!

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

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

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

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

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

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

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!

Untuk Hapus, Anda perlu melakukan hal berikut

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

Itu berhasil untuk saya.

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.

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

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.

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