How to Make DELETE Requests with Axios

Axios is a popular HTTP request library that can send asynchronous requests in both browser and Node.js environments. Using JavaScript libraries like Axios for handling HTTP requests has become very common. This article will focus on how to use Axios for DELETE requests and explore different ways of passing parameters.

Basic Concepts of DELETE Requests

DELETE requests are used to send a request to the server to delete a resource. It is an essential method in RESTful APIs used to delete a specified resource.

In Axios, sending a DELETE request requires specifying the target URL and optionally passing some parameters like request headers and request body. Unlike GET requests, DELETE requests can contain a request body, so in some cases, you may need to send data with a DELETE request.

Ways to Pass Parameters in DELETE Requests

In Axios, there are several ways to pass parameters in DELETE requests:

1. Passing Parameters in the URL
   The simplest way is to directly append parameters to the URL. This is typically used for passing a small amount of data, such as resource IDs.

Example Code:

const axios = require('axios');

const resourceId = 123;
axios.delete(`https://api.example.com/resource/${resourceId}`)
  .then(response => {
    console.log('Resource deleted successfully:', response.data);
  })
  .catch(error => {
    console.error('Error deleting resource:', error);
  });

2. Using the "params" Parameter to Pass Parameters
If you want to pass parameters as query parameters, you can use Axios's "params" parameter.

Example Code:

const axios = require('axios');

const params = { id: 123 };
axios.delete('https://api.example.com/resource', { params })
  .then(response => {
    console.log('Resource deleted successfully:', response.data);
  })
  .catch(error => {
    console.error('Error deleting resource:', error);
  });

3. Using the "data" Parameter to Pass Request Body Data
For cases where you need to pass complex data with a DELETE request, you can use Axios's "data" parameter.

Example Code:

const axios = require('axios');

const requestData = { id: 123, reason: 'No longer needed' };
axios.delete('https://api.example.com/resource', { data: requestData })
  .then(response => {
    console.log('Resource deleted successfully:', response.data);
  })
  .catch(error => {
    console.error('Error deleting resource:', error);
  });

Sending a DELETE Request with Axios React

Let's practice with a simple example where we'll use Axios to send a DELETE request to delete a user.

Install json-server

First, you need to install json-server using npm or yarn in your project directory.

npm install -g json-server

Next, create a JSON file in your project directory to simulate your data. Assuming you want to simulate user data, create a file named "users.json" and define user data in it.

Example content of the "users.json" file:

{
  "users": [
    { "id": 1, "name": "John Doe", "email": "john@example.com" },
    { "id": 2, "name": "Jane Smith", "email": "jane@example.com" }
  ]
}

Finally, run the following command in the terminal to start json-server and specify the mock data file:

json-server --watch users.json --port 3000

This will start a mock server, listen on port 3000, and use the data from the "users.json" file as simulated resources.

Send a DELETE Request

The routes provided by json-server for DELETE requests can be:

DELETE http://localhost:3000/users/:userId

First, create a new JavaScript file (e.g., "deleteUser.js") in your IDE editor and paste the following code. Then, run it in the console using the node deleteUser.js command.

const axios = require('axios');

const userId = 1; // ID of the user to delete
axios.delete('http://localhost:3000/users/' + userId)
  .then(response => {
    console.log('User deleted successfully:', response.data);
  })
  .catch(error => {
    console.error('Error deleting user:', error);
  });

Note: If you encounter errors, make sure you have axios installed by running npm install axios.

In the code above, we used the first method, directly passing parameters (user ID) in the URL to delete the corresponding user.

Using Apidog to Debug Backend APIs

Apidog supports debugging interfaces for various protocols such as HTTP(s), WebSocket, Socket and gRPC. When backend developers complete service interfaces, you can use Apidog to verify the correctness of the interfaces in the testing phase, greatly improving project deployment efficiency.

In the example in this article, you can use Apidog to test the interface. Create a new project and select "Debug Mode" within the project. Enter the request address, and you can quickly send requests and get response results. The practice example mentioned above is shown in the image.