Node Js Make HTTP Put Request with Axios Library Tutorial

If you are learning node development and striving really hard, we can help you a bit in this divine quest.

In this quick node HTTP put tutorial, we are going to show you how to make an HTTP PUT request in the Node js application using the Axios package.

Axios is a profound promise-based HTTP client for the browser and the node js application. It works eloquently on the server side and uses the node HTTP module. On the other hand, on the client-side, it uses the XMLHttpRequests.

Here are some of the advantageous features of Axios:

  • Cancel requests
  • Supports the Promise API
  • Intercept request and response
  • Make HTTP requests from node.js
  • Automatic transforms for JSON data
  • Transform request and response data
  • Make XMLHttpRequests from the browser
  • Client-side support for protecting against XSRF

The HTTP PUT request method is used to create by updating a new resource. It updates a representation of the pointed resource with the request payload.

Here are some steps you need to take to successfully handle Axios HTTP put request in node environment.

How to Handle HTTP Put Request in Node with Axios

  • Step 1: Create Node Project
  • Step 2: Install Axios Plugin
  • Step 3: Create JSON Server
  • Step 4: Send Http Put Request
  • Step 5: Add App Command
  • Step 6: View App in Action

Create Node Project

Open the code editor, also open the terminal than on the command prompt type the command, this command will generate the blank project folder.

mkdir node-cosmos

To set up the node app, you have to get into the project folder.

cd node-cosmos

The npm init command is significant in setting up the node project and here is the command that has to be invoked from the terminal.

npm init

This command will create a new package.json file, and this file holds the scripts and other essential information regarding the project.

Install Axios Plugin

Head over to the console; on your console, you have to type the given single command, and after you execute the command within a couple of seconds, it will add the Axios package in the node app.

npm install axios

Create JSON Server

In this step, we will set up a simple fake backend server, and we wanted to show you how things look-alike in the real world scenario.

If you do not want to use the fake API, then jump on to the next step; otherwise, type the command and hit enter to install the json server package.

npm install json-server

After the package has been added, at the root of your node app create db.json and make sure to append the given code into the file.

{
  "users": [
    {
      "id": 1,
      "name": "Leanne Graham",
      "username": "Bret",
      "email": "Sincere@april.biz",
      "phone": "1-770-736-8031 x56442",
      "website": "hildegard.org"
    },
    {
      "id": 2,
      "name": "Ervin Howell",
      "username": "Antonette",
      "email": "Shanna@melissa.tv",
      "phone": "010-692-6593 x09125",
      "website": "anastasia.net"
    }
  ]
}

Now, the server has been set up, and it’s time to start the json server. Open the terminal, type, and press enter to start the server.

json-server --watch db.json

Here are the fake APIs that you can use for updating the data in node through HTTP Put request method.

\{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/users

  Home
  http://localhost:3000

Send Http Put Request

To make the HTTP put request in node, you have to first create the app.js file.

After creating the file, ensure that you have added the given code into the file.

const axios = require('axios')

const userData = {
  id: 1,
  name: 'Sam Johnson',
  username: 'crazy-simon',
  email: 'sam@abc.com',
  phone: '2-890-736-8031 5555',
  website: 'wwf.com',
}

const EndPoint = 'http://localhost:3000/users/1'

axios
  .put(EndPoint, userData)
  .then((response) => {
    console.log(response.data)
  })
  .catch((error) => {
    console.error(error)
  })

Add App Command

We have to see how does the put request update the data in node and we needed to register the single command for that.

Hence, we need to add the app.js command with node attribute into the scripts tag in package.json file.

  "scripts": {
    "start": "node app.js"
  },

View App in Action

In the last step, we have to check the progress of our little feature that we built in node.

Head over to console, type command and hit enter to start the app on the browser.

node app.js

Here is the output appear on your terminal:

{
  id: 1,
  name: 'Sam Johnson',
  username: 'crazy-simon',
  email: 'sam@abc.com',
  phone: '2-890-736-8031 5555',
  website: 'wwf.com'
}

Summary

Node Js Make HTTP Put Request with Axios Library Tutorial

In this guide, we have seen how to create a basic node app from scratch. We have ideally learned how to send put requests using the HTTP put method in the Node app.

To make the put request in node, we took the help of Axios and understood what Axios could do for us from HTTP request’s outlook.