How to Use Axios for HTTP PUT and PATCH Requests?

While many libraries are available for making HTTP requests in JavaScript, Axios has become a popular choice due to its simplicity and ease of use.

In this guide, we will walk through the process of using Axios to make PUT and PATCH requests in a web application.

Making an HTTP PUT request

Axios is a popular JavaScript library for making HTTP requests from the browser or Node.js. A PUT request is a type of HTTP request that is used to update an existing resource on a server. It replaces the entire resource with the updated version. PUT requests are commonly used in RESTful APIs to update resources such as articles, user profiles, or products.

To make a PUT request using Axios, you can use the axios.put() method.

js
Copy
axios.put(url[, data[, config]])

Where:

• url is the API endpoint you want to send the PUT request to.
• data is an optional parameter representing the data you want to send in the request body.
• config is an optional parameter representing the request configuration object.

Example

We will use the JSONPlaceholder API for our example. Before we learn how to make a PUT request with Axios, let’s quickly test our API using Rapid API Client.

Let’s create a new request inside Rapid API Client, add the API endpoint, change the HTTP method to PUT, add request body, and then click on the Send button.

API Tested using Rapid API Client

Now that our API is working, let’s make a PUT request to it but this time using Axios. So let’s go ahead and install it by running the following command in your terminal:

sh
Copy
npm install axios

Now we will import Axios into our project by using the following code:

js
Copy
import axios from 'axios';

Then use the Axios put() method to send the data to the server:

js
Copy
const axios = require("axios");
axios.put('https://jsonplaceholder.typicode.com/posts/1', {
  userId: 1,
  id: 1,
  title: 'New Title',
  body: 'New Body Text',
})
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

You can see that we have passed an object as a second parameter to axios.put(). This object is the request body that contains the information that we want the server to update.

You will see a status code of 200, which means the request was successful. You can check the response to the request as well.

That's it! You have successfully made a PUT request using Axios.

Making an HTTP PATCH request

The PATCH request is an HTTP method to update a resource. It is used when you need to update only a part of a resource rather than the entire resource. This method allows you to send a set of instructions to the server, indicating the changes that should be made to the resource.

The syntax is similar to that of PUT request:

js
Copy
axios.patch(url[, data[, config]])

Example

Here is an example of making a PATCH request using axios.patch.

js
Copy
const axios = require("axios");
axios.patch('https://jsonplaceholder.typicode.com/users/1', {
  name: 'John Doe',
  username: 'johndoe',
  email: 'johndoe@example.com'
})
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

This code sends a PATCH request to update the user with ID 1 by providing a new name, username, and email address in the request body. The output will be the updated user data with the new name and email. The response will contain the HTTP status code 200 (OK) along with the updated user data in JSON format.

Error handling

When sending PUT and PATCH requests with Axios, there are several common errors that can occur. These include network errors, server errors, and user input errors such as incorrect or missing parameters.

To handle these errors, we can use promise-chaining to catch the error and take appropriate action.

js
Copy
axios.put(url, data, config)
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    if (error.response) {
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      console.log(error.request);
    } else {
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

If there is an error, we use console.log() to log it on the console.

Wrap up

PUT and PATCH requests are important HTTP methods, allowing clients to update resources on the server. With the Axios library, making PUT and PATCH requests is straightforward, with various configuration options available for customizing the requests.