How to Make Axios DELETE Request in React?

In this tutorial, we learn about how to make a DELETE HTTP request using the Axios package. We will learn different ways of using the Axios and making DELETE requests.

We already covered about how to make Axios GET requests, Axios POST requests, and Axios PUT (Update) requests.

So, let’s start with creating react application and installing the Axios package in the application to use it.

Axios HTTP DELETE Request in React

Before proceeding further make sure you have a proper react application installed on your machine and working fine. For more details check how to install react and create an application.

OK, after installation, you need to install the Axios package using the npm. Then we will also see some basic examples of Axios DELETE requests and we will also use the Axios API to make DELETE requests.

Install Axios From NPM

You have to run the following npm command to install the Axios package in your project. Make sure you are in the project directory.

This command will install all the dependencies for the Axios package, so you can import it into your react component and then use it.

Command to install the axios package

npm install axios

yarn add axios

Syntax to import the axios package

import axios from "axios";

Axios DELETE Request in Class-Based Component

Let’s make a class-based react component and then create a function handleDelete() to make a Axios DELETE requests. And then bind this function with button, so when you click on that button then the handleDelete() function will trigger and send the delete data request.

API URL: http://dummy.restapiexample.com/api/v1/delete/{ID}

import React from 'react';
import axios from 'axios';

export default class DeleteEmployee extends React.Component {

    handleDelete = () => {
        axios.delete(`http://dummy.restapiexample.com/api/v1/delete/4`)
        .then(response => {
            this.setState({ status: response.status });
        })
    }

    render() {
        return (
            <>
                <h4>Axios DELETE Request Example in React</h4>

                <input type="button" name="submit" value="Delete" onClick={this.handleDelete}/>
            </>
        )
    }
}

You see above, we made a function to make a DELETE request and call that function when clicking on the Delete button. In the API URL, “4” is the ID of data that we want to delete. So, it will delete data from the database with respect to that ID and return success status.

The success message, you can show in the render() method of the component. You can print it or show the response data accordingly as you want.

Axios DELETE Request in Function-Based Component

Now we will take a function-based react component to make DELETE requests using the Axios library. In this component, we will also make a handleDelete() function to run the Axios request.

The handleDelete() function work same as in class-based function and run when the function call. You can direct call the function on button.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function DeleteEmployee() {

    handleDelete() {
        axios.delete(`http://dummy.restapiexample.com/api/v1/delete/8`)
        .then(response => {
            setStatus(response.status);
        })
    }

    return (
        <>
            <h4>Axios DELETE Request Example in React</h4>

            <input type="button" name="submit" value="Delete" onClick={handleDelete}/>
        </>
    );
}

Axios DELETE Request with Error Handling

Now we will see how to handle the error in the request, we will use the catch() promise method to handle the errors. Let’s see the example code.

handleDelete = () => {
    axios.delete(`http://dummy.restapiexample.com/api/v1/delete/11`)
    .then(response => {
        this.setState({ status: response.status })
    })
    .catch(error => {
        this.setState({ errorMessage: error.message });
    });
}

The above example code will send an HTTP DELETE request with Axios and return the response but if any error exists then the catch() method will return the error message and you can print that error in the component as you want.

Axios DELETE Request with HTTP Headers

To send the HTTP headers with DELETE requests using the Axios, you have to pass the second parameter as an object of header values. Look at the following example for reference.

handleSubmit = () => {
    const headers = {
        'Authorization': 'Bearer token_value',
    };
    axios.delete(`http://dummy.restapiexample.com/api/v1/delete/45`, { headers })
    .then(response => {
        this.setState({ status: response.status })
    })
    .catch(error => {
        this.setState({ errorMessage: error.message });
    });
}

In the above example, we make a const for the header object and then pass it into Axios DELETE request as a second parameter. You can also pass any customer headers in the DELETE requests.

Axios DELETE Request Using async/await

In the above examples, we used then() method to wait till promise returns the response and then continues on further action. But you can also do this same thing with async and await javascript expressions.

You have to add the async expression before the name of the function and then use the await expression with the Axios request action. See the following example to better understand.

handleSubmit = async() => {
    const response = await axios.delete(`http://dummy.restapiexample.com/api/v1/delete/34`);
    this.setState({ status: response.status })
}

Conclusion

So in this tutorial, you learn about how to make an HTTP DELETE request using Axios and send the ID in the request to delete data from the database. We also covered how to use the Axios DELETE method in class-based components and function-based components.

You also see how to handle the error with Axios while sending the DELETE requests and some more useful ways to use the Axios package with async/await, send HTTP headers.

If you have any questions please do let me know in the comment section, I will respond to you as soon as possible and get a solution together.