Axios Patch Request

Axios is a popular JavaScript library that provides a simple yet powerful way to make HTTP requests from a web browser or Nodejs to backend services or APIs. It supports various request methods, including GET, POST, PUT, DELETE, and PATCH.

In this article, we will focus specifically on the Axios Patch request with examples and explore how to use it effectively.

What is a PATCH request?

A PATCH request is an HTTP method used to partially update a resource on the server. Unlike the PUT request, which replaces the entire resource, the PATCH request allows you to send only the changes you want to apply to the resource.

Imagine you have a record about a person, like their name, email, and age. If you just want to change their email and nothing else, you can send a special request called a “patch request.” You don’t have to send all the other details again, just the new email you want to use.

Installing Axios

Before we dive into the code examples, make sure you have Axios installed in your project. You can install it via npm or yarn using the following command:

npm install axios

or

yarn add axios

Once Axios is installed, you can start using it to make PATCH requests.

Send Patch Request With Axios

To send a PATCH request with Axios, you need to provide the URL endpoint, the data you want to send and any additional configuration options.

Here’s a basic example that demonstrates how to make a PATCH request using Axios:

import axios from 'axios';

axios.patch('/api/resource/users/145', { fieldToUpdate: 'new value' })
  .then(response => {
    console.log('Request successful:', response.data);
    console.log('Status code:', response.status);
  })
  .catch(error => {
    console.error('Request failed:', error.message);
  });

In this example, we are sending a PATCH request to the /api/resource/users/145 endpoint with the data { fieldToUpdate: 'new value' }.

Next, server will update the email of the user with id 145 and respond the request. And then, the .patch() method will return a promise that allows us to handle the response or catch any errors that occur during the request.

Handling Response and Error

As mentioned earlier, the .patch() method returns a promise, allowing to handle the response and errors accordingly. In the previous example, we used .then() to handle the successful response and .catch() to handle any errors that occurred during the request.

The successful response will contain the data returned by the server. You can access this data using the response.data property. In case of an error, the error object will contain information about the error, including the status code, error message and more.

Sending headers with a PATCH request

In some cases, you may need to send additional headers along with the PATCH request. Headers are packages providing important information about the request, such as the type of content the client can accept, the language preference, and authorization credentials.

You can pass a configuration object as the second argument to the .patch() method to specify custom headers.

Here’s the example:

axios.patch('/api/resource/users/145', { fieldToUpdate: 'new value' }, {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your_token'
  }
})
  .then(response => {
    console.log('Request successful:', response.data);
  })
  .catch(error => {
    console.error('Request failed:', error);
  });

In this example, we set the Content-Type header to 'application/json' and include an Authorization header with a bearer token. You can modify the headers as per your specific requirements.

Conclusion

Axios is the popular javascript library to send HTTP requests including GET, POST, PUT, DELETE and PATCH. In this article, we explored how to use Axios to send PATCH requests with headers in JavaScript to partially update a source.

Thank you for reading