Axios ¿Eliminar solicitud con cuerpo y encabezados?


104

Estoy usando Axios mientras programo en ReactJS y pretendo enviar una solicitud DELETE a mi servidor.

Para hacerlo, necesito los encabezados:

headers: {
  'Authorization': ...
}

y el cuerpo se compone de

var payload = {
    "username": ..
}

He estado buscando en Internet y solo encontré que el método DELETE requiere un "param" y no acepta "datos".

He estado intentando enviarlo así:

axios.delete(URL, payload, header);

o incluso

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

Pero nada parece funcionar...

¿Alguien puede decirme si es posible (supongo que lo es) enviar una solicitud DELETE con encabezados y cuerpo y cómo hacerlo?

¡Gracias de antemano!

Respuestas:


126

Entonces, después de varios intentos, lo encontré funcionando.

Siga la secuencia del pedido , es muy importante; de ​​lo contrario, no funcionará.

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

97

axiox.deleteadmite un cuerpo de solicitud. Acepta dos parámetros: url y configuración opcional. Puede usar config.datapara establecer el cuerpo de la solicitud y los encabezados de la siguiente manera:

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

Ver aquí: https://github.com/axios/axios/issues/897


El caso es que quiero enviar un cuerpo y encabezados en la misma solicitud de eliminación
Asfourhundred

75

Aquí hay un breve resumen de los formatos necesarios para enviar varios verbos http con axios:

  • GET: Dos caminos

    • Primer método

      axios.get('/user?ID=12345')
        .then(function (response) {
          // Do something
        })
      
    • Segundo método

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

    Los dos anteriores son equivalentes. Observe la paramspalabra clave en el segundo método.

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

Conclusiones clave

  • getlas solicitudes opcionalmente necesitan una paramsclave para configurar correctamente los parámetros de consulta
  • deletelas solicitudes con un cuerpo necesitan que se establezca bajo una dataclave

11
Su respuesta me hace desear que haya una función de voto positivo de +2 en el desbordamiento de pila.
eli-bd

Esta es la única respuesta que lo explica en detalle. Gracias, realmente ayudó a comprender incluso a los demás.
Geoff

¿Cómo enviar una solicitud de eliminación con parámetros, no cuerpo?
MaFiA

La mejor respuesta a esta pregunta. Gracias.
HartleySan

1
@MaFiA, si desea enviar una solicitud de eliminación con params. Simplemente puede ponerlo en la URL usando cadenas de consulta
Van_Paitin

13

axios. delete se pasa una URL y una configuración opcional .

axios.delete (url [, config])

Los campos disponibles para la configuración pueden incluir los encabezados .

Esto hace que la llamada a la API se pueda escribir como:

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

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

Esto no funciona para mí ... Tengo const headers = {'Authorization': ...}y data = {'username': ...}termina con, axios.delete('http://...', {headers, data})pero el servidor no puede acceder a los encabezados ...
Asfourhundred

La solicitud que sale del navegador dice diferente. Vea este Stackblitz ( stackblitz.com/edit/react-gq1maa ) y también la solicitud en la pestaña de red del navegador ( snag.gy/JrAMjD.jpg ). Debe asegurarse aquí de que está leyendo los encabezados del lado del servidor de la manera correcta o que la solicitud no es interceptada ni manipulada.
Oluwafemi Sule

6

Tuve el mismo problema, lo resolví así:

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

5

De hecho, axios.deleteadmite un cuerpo de solicitud.
Acepta dos parámetros: URLay un opcional config. Es decir...

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

Puede hacer lo siguiente para establecer el cuerpo de respuesta para la solicitud de eliminación:

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)

¡Espero que esto ayude a alguien!


1
Gracias, estoy usando esto en mi método de eliminación de HttpService de nestJs como: this.httpService.delete (apiUrl, {headers: headersRequest, data: deleteBody})
shanti

4

Para Eliminar, deberá hacer lo siguiente

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

Funcionó para mí.


2

Para enviar un HTTP DELETE con algunos encabezados a través de lo axiosque he hecho:

  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 axiossintaxis para diferentes verbos HTTP (GET, POST, PUT, DELETE) es complicada porque a veces se supone que el segundo parámetro es el cuerpo HTTP, otras veces (cuando puede que no sea necesario) simplemente pasa los encabezados como segundo parámetro .

Sin embargo, digamos que necesita enviar una solicitud HTTP POST sin un cuerpo HTTP, luego debe pasar undefinedcomo segundo parámetro.

Tenga en cuenta que de acuerdo con la definición del objeto de configuración ( https://github.com/axios/axios#request-config ) aún puede pasar un cuerpo HTTP en la llamada HTTP a través del datacampo al llamar axios.delete, sin embargo, para el HTTP BORRAR verbo será ignorado.

Esta confusión entre el segundo parámetro es a veces el cuerpo HTTP y en otras ocasiones el configobjeto completo axiosse debe a cómo se han implementado las reglas HTTP. A veces, no se necesita un cuerpo HTTP para que una llamada HTTP se considere válida.


0

Encontré el mismo problema ... Lo resolví creando una instancia de axios personalizada. y usar eso para hacer una solicitud de eliminación autenticada.

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

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

0

Probé todo lo anterior que no funcionó para mí. Terminé yendo con PUT (inspiración encontrada aquí ) y simplemente cambié la lógica del lado del servidor para realizar una eliminación en esta llamada de URL. (Anulación de la función del marco de descanso de django).

p.ej

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

-1

Encontré una forma que funciona:

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

Espero que esto funcione para ti también.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.