Axios – DELETE Request With Request Body and Headers?

Axios – DELETE Request With Request Body and Headers?

When working with APIs, it’s common to need to send a DELETE request with a request body and headers. However, the popular JavaScript library Axios doesn’t provide a built-in method to do this. In this blog post, we’ll explore two solutions to achieve this functionality.

Solution 1: Using the Axios `request` Method

The first solution involves using the Axios request method, which allows us to make custom HTTP requests. Here’s an example of how to make a DELETE request with a request body and headers:

import axios from 'axios';

const url = 'https://api.example.com/delete-endpoint';
const data = { id: 1 };
const headers = { Authorization: 'Bearer your-token' };

axios.request({
  url,
  method: 'DELETE',
  data,
  headers,
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

In this example, we pass the url, method, data, and headers as options to the request method. The data object contains the request body, and the headers object contains any additional headers you want to include.

Solution 2: Using the Axios `delete` Method with a Custom `transformRequest` Function

If you prefer to use the Axios delete method instead of the request method, you can achieve the same functionality by providing a custom transformRequest function. Here’s an example:

import axios from 'axios';

const url = 'https://api.example.com/delete-endpoint';
const data = { id: 1 };
const headers = { Authorization: 'Bearer your-token' };

axios.delete(url, {
  data,
  headers,
  transformRequest: [(data, headers) => {
    // Serialize the data object to JSON
    return JSON.stringify(data);
  }],
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

In this example, we pass the data and headers as options to the delete method. We also provide a custom transformRequest function that serializes the data object to JSON using JSON.stringify. This ensures that the request body is sent correctly.

Both solutions allow you to send a DELETE request with a request body and headers using Axios. Choose the one that suits your coding style and project requirements.

Happy coding!