Axios - HTTP PATCH Request Examples

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

Other Axios HTTP examples: GET, POST, PATCH, DELETE

Tutorial contents

• Installing Axios
• Simple PATCH request with a JSON body
• PATCH request with async/await
• PATCH request with headers set
• PATCH request with error handling

Installing axios from npm

With the npm CLI: npm install axios

With the yarn CLI: yarn add axios

Simple PATCH request with a JSON body using axios

This sends an HTTP PATCH request to the Test JSON API which is a fake online REST API that includes a product details route (/products/{id}) route that responds to PATCH requests with the contents of the request body plus the id property from the URL and an updatedAt date property.

A product JSON object is sent to the /products/1 route and the returned updatedAt property from the response is written to the #patch-request .date-updated element so it's displayed on the page.

// Simple PATCH request with a JSON body using axios
const element = document.querySelector('#patch-request .date-updated');
const product = { name: 'Axios PATCH Request Example' };
axios.patch('https://testapi.jasonwatmore.com/products/1', product)
    .then(response => element.innerHTML = response.data.updatedAt);

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

PATCH request using axios with async/await

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

(async () => {
    // PATCH request using axios with async/await
    const element = document.querySelector('#patch-request-async-await .date-updated');
    const product = { name: 'Axios PATCH Request Example' };
    const response = await axios.patch('https://testapi.jasonwatmore.com/products/1', product);
    element.innerHTML = response.data.updatedAt;
})();

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

PATCH request using axios with set HTTP headers

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

// PATCH request using axios with set headers
const element = document.querySelector('#patch-request-set-headers .date-updated');
const product = { name: 'Axios PATCH Request Example' };
const headers = { 
    'Authorization': 'Bearer my-token',
    'My-Custom-Header': 'foobar'
};
axios.patch('https://testapi.jasonwatmore.com/products/1', product, { headers })
    .then(response => element.innerHTML = response.data.updatedAt);

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

PATCH request using axios with error handling

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

// PATCH request using axios with error handling
const element = document.querySelector('#patch-request-error-handling .date-updated');
const product = { name: 'Axios PATCH Request Example' };
axios.patch('https://testapi.jasonwatmore.com/invalid-url', product)
    .then(response => element.innerHTML = response.data.updatedAt )
    .catch(error => {
        element.parentElement.innerHTML = `Error: ${error.message}`;
        console.error('There was an error!', error);
    });

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