Axios - HTTP PUT Request Examples

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

Other HTTP examples available:

• Axios: GET, POST, DELETE
• 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 PUT request with a JSON body using axios

This sends an HTTP PUT request to the Reqres api which is a fake online REST api that includes a generic /api/<resource> route that responds to PUT requests for any <resource> with the contents of the request body and an updatedAt property with the current date. This example sends an article object to the /api/articles/1 route and then writes the updatedAt property from the response to the #put-request .date-updated element so it's displayed on the page.

// Simple PUT request with a JSON body using axios
const element = document.querySelector('#put-request .date-updated');
const article = { title: 'Axios PUT Request Example' };
axios.put('https://reqres.in/api/articles/1', article)
    .then(response => element.innerHTML = response.data.updatedAt);

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

PUT request using axios with async/await

This sends the same PUT 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 () => {
    // PUT request using axios with async/await
    const element = document.querySelector('#put-request-async-await .date-updated');
    const article = { title: 'Axios PUT Request Example' };
    const response = await axios.put('https://reqres.in/api/articles/1', article);
    element.innerHTML = response.data.updatedAt;
})();

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

PUT request using axios with error handling

This sends a PUT request with axios to an invalid url on the api then writes the error message to the parent of the #put-request-error-handling .date-updated element and logs the error to the console.

// PUT request using axios with error handling
const element = document.querySelector('#put-request-error-handling .date-updated');
const article = { title: 'Axios PUT Request Example' };
axios.put('https://reqres.in/invalid-url', article)
    .then(response => element.innerHTML = response.data.updatedAt )
    .catch(error => {
        element.parentElement.innerHTML = `Error: ${error.message}`;
        console.error('There was an error!', error);
    });

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

PUT request using axios with set HTTP headers

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

// PUT request using axios with set headers
const element = document.querySelector('#put-request-set-headers .date-updated');
const article = { title: 'Axios PUT Request Example' };
const headers = { 
    'Authorization': 'Bearer my-token',
    'My-Custom-Header': 'foobar'
};
axios.put('https://reqres.in/api/articles/1', article, { headers })
    .then(response => element.innerHTML = response.data.updatedAt);

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