How To Send Axios Patch Request With Headers

Axios is a powerful library for making any type of HTTP requests. In this article, we will focus on how to send Axios Patch request, along with examples, using the axios.patch method.

Axios PATCH request

Before you start, it is important for you to know what a patch request is and what makes different it from a put request.

Simply put, A PATCH request is an HTTP method used to partially update a resource on the server. When it comes to the PUT request, it is used to replace the entire resource.

Imagine you have a record about a person, like their name, email, and age. If you just want to change its email and nothing else, you can send a patch request with the new email you want to use.

How To Install Axios

Before we dive into 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

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

How To Send Axios Patch Request

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 shows how to make a PATCH request with 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' }

After server process the request and respond, the axios.patch() method will return a promise that allows us to handle the response or catch any errors that occur during the request.

Let's see how to handle response or erros.

How To Handle Response and Error Of Axios Patch Request

As mentioned earlier, the axios.patch() method returns a promise. This is why we used .then() to handle the successful response and .catch() to handle any errors in the previous example.

Of course, you can also use a async function with a try-catch statement to handle response or any errors, as shown below.

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

// Call the async function
updateResource();

I think, it is more clear and readable option, you can prefer this.

No matter which option you use, 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.

How To Send Headers with an Axios Patch request

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

You can pass an object as the second argument to the axios.patch() method to add headers to your request.

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 code snippet, we set the Content-Type header to application/json and include 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.

Thank you for reading