JavascriptNodeJS
Last updated at 2023-09-03

Axios DELETE Request with Example

ClickUp
Note
AI Status
Full
Last Edit By
Last edited time
Sep 3, 2023 01:31 PM
Metatag
Slug
axios-delete-request
Writer
Published
Published
Date
Sep 3, 2023
Category
Javascript
NodeJS
Axios, a versatile JavaScript library, is widely used for making HTTP requests in both web browsers and Node.js environments.
In addition to sending GET, POST, and PATCH requests, Axios is equally proficient in handling DELETE requests.
In this article, you will delve into the fundamentals of making DELETE requests with Axios.
Whether you are new to Axios or looking to expand your knowledge, this guide will walk you through the process.

Prerequisites

Before you begin, ensure that you have Axios installed on your project.
You can easily install it using npm or yarn:
npm install axios
# or
yarn add axios
Once Axios is installed, you can start using it to perform DELETE requests.

Complete Axios DELETE Request Example

Let's begin with a comprehensive example that demonstrates the various aspects of making a DELETE request using Axios.
This example covers sending the request, handling headers, managing responses, and error handling.
const axios = require('axios');

const API_URL = 'https://jsonplaceholder.typicode.com/posts/1';

const CUSTOM_HEADERS = {
  'Authorization': 'Bearer YOUR_TOKEN',
};

axios.delete(API_URL, {
  headers: CUSTOM_HEADERS,
})
.then((response) => {
  if (response.status === 204) {
    console.log('Data deleted successfully.');
  } else {
    console.error('An unexpected error occurred.');
  }
})
.catch((error) => {
  console.error('Error:', error.message);
});
Now that you have a complete example, let's explore the specific details of making DELETE requests with Axios.

1. Basic DELETE Request

At the core of making a DELETE request with Axios is the axios.delete method.
It allows you to send a DELETE request to a specified URL to remove a resource.
Here's a simplified example:
const axios = require('axios');

const API_URL = 'https://jsonplaceholder.typicode.com/posts/1';

axios.delete(API_URL)
  .then(() => {
    console.log('Data deleted successfully.');
  })
  .catch((error) => {
    console.error('Error:', error.message);
  });
In this code:
  • You import Axios.
  • You use the axios.delete method and provide the URL of the resource to be deleted.
  • You handle the response using .then and any errors using .catch.

2. Handling Headers

Headers are essential in HTTP requests, especially when dealing with authentication or specifying content types.
You can include custom headers in your DELETE request by providing an object of headers in the request configuration.
Here's an example:
const CUSTOM_HEADERS = {
  'Authorization': 'Bearer YOUR_TOKEN',
};

axios.delete(API_URL, {
  headers: CUSTOM_HEADERS,
})
In this example, we set the 'Authorization' header with a bearer token for authentication. Customize the headers according to your API requirements.

3. Handling Response

Handling the response from a DELETE request is relatively simple.
Since DELETE requests typically do not return a response body, you can check the response status code to determine the outcome.
In Axios, you can access the response status code using response.status.
axios.delete(API_URL)
  .then((response) => {
    if (response.status === 204) {
      console.log('Data deleted successfully.');
    }
  })
In this example, we check if the response status code is 204 No Content, which is a common status code for successful DELETE requests.

4. Error Handling

Error handling is a crucial aspect of making HTTP requests.
Axios makes it easy to handle errors using the .catch block.
It captures any errors that occur during the request, including network errors and response errors.
axios.delete(API_URL)
  .then(() => {
    console.log('Data deleted successfully.');
  })
  .catch((error) => {
    console.error('Error:', error.message);
  });
In this example, we log the error message to the console in case of an error.
Customize error handling to suit your application's needs, such as displaying user-friendly error messages or taking specific actions based on the error type.

Conclusion

Making DELETE requests with Axios is a fundamental skill for removing data from a server or interacting with APIs that support resource deletion.
In this comprehensive guide, you have learned how to create DELETE requests with Axios, including sending the request, handling headers, managing responses, and implementing error handling.
Axios provides a user-friendly and flexible interface for handling HTTP requests in JavaScript projects, making it a valuable tool for developers.
With this knowledge, you can confidently incorporate DELETE requests into your applications and interact with RESTful APIs for resource removal.

Discussion (0)

Related Posts