How to use AXIOS HTTP Client Library in Node.js

Abstract: Axios is a promise-based HTTP client for node.js and the browser. It can run in the browser and nodejs with the same codebase). On the server-side, it uses the native node.js

By Javascript Diary

April 3, 2022

Axios is a promise-based HTTP client for node.js and the browser. It can run in the browser and nodejs with the same codebase). On the server-side, it uses the native node.js http module, while on the client (browser) it uses XMLHttpRequests. In this article, we will learn from installing axios library to using it in our project.  And also I have mentioned the advance level of using axios library like custom headers, intercepting, transferring, cancelling request, err handling, and Axios GLOBALs. 

Features of Axios:

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

Installing Axios in your project

Method -1: Using npm

$ npm install axios

Method -2: Using jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Method - 3: Using unpkg CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
I will be using the first method in my project as I am working with Node.JS. After installing the axios package through npm, I will now import it into my main javascript file(main.js) 
const axios = require('axios');

GET REQUEST WITH AXIOS

you can use axio.get() method to perform the get request. 
   axios.get('https://jsonplaceholder.typicode.com/todos?_limit=5')
        .then((res) => {console.log(res.data);})
        .catch(err)=>{console.log(err)});
 /*** don't forget to change the url what I have passed above in .get() method. ***/
You can also perform the HTTP requests in another format (this is a kind of classic model.) 
   axios(
          { method:'get',
            url:'https://jsonplaceholder.typicode.com/todos',
            params:{limit:5}
          })
        .then((res) => {console.log(res.data);})
        .catch(err)=>{console.log(err)});
 /*** don't forget to change the url what I have passed above in .get() method. ***/
As you can see in the above snippet, I have used params object which is a parameter that will help to limit the total data up to 5. You can pass as many as parameters you want and get the desired response.

POST REQUEST WITH AXIOS

you can use axio.post() method to perform the POST request. 
   axios.post('https://jsonplaceholder.typicode.com/todos',{title:"Writing Blog",completed:false})
        .then((res) => {console.log("Data Posted Successfully");})
        .catch(err)=>{console.log(err)});
In the above example as you can see I have passed the data [which I want to submit using the POST method ] directly in the post() method just after the URL.

PUT REQUEST WITH AXIOS

you can use axio.put() method to perform the PUT request. 
   axios.put('https://jsonplaceholder.typicode.com/todos/1',{title:"Writing Blog",completed:false})
        .then((res) => {console.log("Data Posted Successfully");})
        .catch(err)=>{console.log(err)});
Again, you can pass the data in object format  [ which you want to update ] as a second parameter of the PUT method just after the URL.

PATCH REQUEST WITH AXIOS

you can use axio.put() method to perform the PUT request. 
   axios.patch('https://jsonplaceholder.typicode.com/todos/1',
                {title:"Writing Blog",completed:false,author:'Anup Kumar'}
       ).then((res) => console.log("Data Posted Successfully");
       ).catch(err)=>{console.log(err)});

TIPS – PUT vs PATCH:

  1. When you use the put() method, It update the complete data. like if earlier { firstname , lastname , roll_number } were there in database and if you are submitting PUT request something like- { firstname , lastname } (basically I am not passing rollnumber) then the put() method will completely replace the data for that ID and now the new data will be { firstname , lastname}
  2. When you use the patch() method then it just updates the specified data rather than replacing completely. eg: {author:’Anup Kumar’} will be added to the data. and final data will be {title:”Writing Blog”,completed:false,author:’Anup Kumar’} 

DELETE REQUEST WITH AXIOS

you can use axio.delete() method to delete the data with specified id(any identifier). 
   axios.delete('https://jsonplaceholder.typicode.com/todos/1')
        .then((res) => console.log("Data deleted Successfully"))
        .catch(err)=>{console.log(err)});

PERFORMING SIMULTANEOUS REQUESTS WITH AXIOS

to perform a simultaneous request, we use axio.all() method. Let’s understand with an example. 
   function simRequest() {
    axios.all(
        [
            axios.get('https://jsonplaceholder.typicode.com/todos/1'),
            axios.get('https://jsonplaceholder.typicode.com/posts?_limit=5')
        ]
    )
        .then(([res1, res2]) => console.log(res1);console.log(res2))
        .catch(err => console.error(err));
}

REQUEST WITH CUSTOM HEADERS

We often see most of the business APIs are protected and it needs some authorization. For this kind of APIs, we will have to pass the required token or another authorization key along with our request.  Let us see the example how can we pass the token with header along with our request. 
   function customHeaders() {
        const config = {
                      headers: {
                                 'Content-Type': 'application/json',
                                 Authorization: 'TOKENID-ABC##$Y@##U$%%U%^DHRW*'
                               }
                   };
    axios.post('https://jsonplaceholder.typicode.com/todos', { title: 'New Todo',completed: false} , config)
         .then(res => showOutput(res))
         .catch(err => console.error(err));
}

AXIOS GLOBALS

If we are dealing with the API which is protected and needs authorization, then rather than passing a token with every request (as we have done in the above example), we can use Axios GLOBALs to define our token only once and it will be common for every request. 
  axios.defaults.headers.common['X-Auth-Token'] =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c';

AXIOS INSTANCE

an instance can be used to make your task easier like you can create your base url just once by defining as instance and use it whenever you require it.  Let us see an example – 
  const axiosInstance = axios.create({
    // Other custom settings
    baseURL: 'https://jsonplaceholder.typicode.com'
  });
  axiosInstance.get('/comments').then(res => showOutput(res));

CANCEL TOKEN

Let us understand how can we cancel a request with an example. 
  const source = axios.CancelToken.source();
  
    axios
      .get('https://jsonplaceholder.typicode.com/todos', {
        cancelToken: source.token
      })
      .then(res => showOutput(res))
      .catch(thrown => {
        if (axios.isCancel(thrown)) {
          console.log('Request canceled', thrown.message);
        }
      });

TRANSFORMING REQUESTS & RESPONSES

Let us understand how can we transform the title in all upper case with an example. 
  function transformResponse() {
    const options = {
      method: 'post',
      url: 'https://jsonplaceholder.typicode.com/todos',
      data: {
        title: 'Hello World'
      },
      transformResponse: axios.defaults.transformResponse.concat(data => {
        data.title = data.title.toUpperCase();
        return data;
      })
    };
  
    axios(options).then(res => showOutput(res));
  }