How to make DELETE requests with Axios?

Axios, a popular JavaScript library for making HTTP requests, provides a simple way to make DELETE requests.

Let’s see how we can use Axios to make DELETE requests and the importance of using DELETE requests in web applications.

Axios DELETE requests

DELETE requests are HTTP requests that delete a specific resource identified by a URL. It is one of the most commonly used HTTP methods, along with GET, POST, and PUT/PATCH. The DELETE request method is idempotent, meaning that if a request is sent multiple times, the outcome should be the same as sending it once.

Using DELETE requests is crucial for managing resources on a web server. When a resource is no longer needed or is outdated, it can be deleted using it. This helps to reduce server load and ensures that resources are not kept unnecessarily.

Making DELETE requests with Axios

Let’s use JSONPlaceholder API for this example. Before we dive into writing code, let’s test our API using Rapid API Client.

First, create a new request inside Rapid API Client, add the API endpoint, change the HTTP method to DELETE, add the request body, and then click on the Send button.

You should see something like this:

API Tested using Rapid API Client

Now let’s take a look at how we can make the similar request but with Axios. We will use Axios DELETE method and provide it with the API endpoint with the post id. Here is how the code will look like:

js
Copy
import axios from 'axios';
const postIdToDelete = 1;
axios.delete(`https://jsonplaceholder.typicode.com/posts/${postIdToDelete}`)
  .then(response => {
    console.log(`Deleted post with ID ${postIdToDelete}`);
  })
  .catch(error => {
    console.error(error);
  });

Handling errors

Like any other HTTP request, DELETE requests can also encounter errors while the server processes. Some common errors with DELETE requests include authentication failures, resource not found, invalid input data, and server errors.

To handle errors with Axios, we can use the catch block to capture the error and display an appropriate error message to the user.

js
Copy
axios.delete('https://example.com/delete', {
  params: { id: 1234 },
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  if (error.response) {
    console.log(error.response.data);
    console.log(error.response.status);
    console.log(error.response.headers);
  } else if (error.request) {
    console.log(error.request);
  } else {
    console.log('Error', error.message);
  }
  console.log(error.config);
});

If error.response exists, it means we received a response from the server, but it's an error response. In this case, we log the response data, status, and headers to the console.

If error.request exists, we didn't receive a response from the server. This could be due to a network error or a server-side issue. In this case, we log the error request object to the console.

Finally, if none of the above conditions are met, there's an error with the Axios configuration. We log the error message and configuration to the console in this case.

Wrap up

Axios is a powerful tool for making HTTP requests, including GET, POST, PUT, PATCH, and DELETE requests. In this guide, we have learned how to use Axios to make these requests, including how to pass parameters and headers and handle possible errors.