Axios - HTTP DELETE Request Examples

Below is a quick set of examples to show how to send HTTP DELETE requests to an API using the axios HTTP client which is available on npm.

Other HTTP examples available:

• Axios: GET, POST, PUT
• Fetch: GET, POST, PUT, DELETE
• React + Axios: GET, POST, PUT, DELETE
• React + Fetch: GET, POST, PUT, DELETE
• Vue + Axios: GET, POST
• Vue + Fetch: GET, POST, PUT, DELETE
• Angular: GET, POST, PUT, DELETE
• Blazor WebAssembly: GET, POST

Installing axios from npm

With the npm CLI: npm install axios

With the yarn CLI: yarn add axios

Simple DELETE request with axios

This sends an HTTP DELETE request to the Reqres api which is a fake online REST api that includes a /api/posts/:id route that responds to DELETE requests with a HTTP 204 response. When the response is received the status message 'Delete successful' is displayed in the #delete-request .status element.

// Simple DELETE request with axios
const element = document.querySelector('#delete-request .status');
axios.delete('https://reqres.in/api/posts/1')
    .then(() => element.innerHTML = 'Delete successful');

Example Axios DELETE request at https://stackblitz.com/edit/axios-http-delete-request-examples?file=delete-request.js

DELETE request using axios with async/await

This sends the same DELETE request using axios, but this version uses an async function and the await javascript expression to wait for the promises to return (instead of using the promise then() method as above).

(async () => {
    // DELETE request using axios with async/await
    const element = document.querySelector('#delete-request-async-await .status');
    await axios.delete('https://reqres.in/api/posts/1');
    element.innerHTML = 'Delete successful';
})();

Example Axios DELETE request at https://stackblitz.com/edit/axios-http-delete-request-examples?file=delete-request-async-await.js

DELETE request using axios with error handling

This sends a DELETE request with axios to an invalid url on the api then writes the error message to the parent of the #delete-request-error-handling .status element and logs the error to the console.

// DELETE request using axios with error handling
const element = document.querySelector('#delete-request-error-handling .status');
axios.delete('https://reqres.in/invalid-url')
    .then(response => element.innerHTML = 'Delete successful')
    .catch(error => {
        element.parentElement.innerHTML = `Error: ${error.message}`;
        console.error('There was an error!', error);
    });

Example Axios DELETE request at https://stackblitz.com/edit/axios-http-delete-request-examples?file=delete-request-error-handling.js

DELETE request using axios with set HTTP headers

This sends the same DELETE request again using axios with a couple of headers set, the HTTP Authorization header and a custom header My-Custom-Header.

// DELETE request using axios with set headers
const element = document.querySelector('#delete-request-set-headers .status');
const headers = { 
    'Authorization': 'Bearer my-token',
    'My-Custom-Header': 'foobar'
};
axios.delete('https://reqres.in/api/posts/1', { headers })
    .then(() => element.innerHTML = 'Delete successful');

Example Axios DELETE request at https://stackblitz.com/edit/axios-http-delete-request-examples?file=delete-request-set-headers.js