Axios JS & Node.js a match made in heaven for API consumption

Axios is a popular JavaScript HTTP client, in this post we will go through some of the most common use cases with Node.

Let's explore Axios JS and its usage cases with Node

While building a Node.js application or microservice is pretty common you might end up needing to consume a third-party API, or just doing HTTP calls in general, and if that's the case Axios got you covered.

Axios is a promise based HTTP client for the browser and Node.js

Axios provides us an elegant and modern way to handle HTTP requests from Node using promises, to avoid old practices like having to rely on callbacks or deprecated modules such as 

By the end of this tutorial you will have a good grasp on the following:

If you have ever used before Node.js you are good to go, this is an entry-level article, but here are some interesting articles that might enhance your grasp on the subject.

is available through most of the major Node package registry

Step 2: A basic HTTP GET request using Axios

// Doing the import using .default will allow axios.<method> 
// to provide autocomplete and parameter typings
const axios = require('axios').default;

Lets now use the library to do our first HTTP GET request, also to take advantage of Axios native promises using await we will abstract it using an async function:

async function httpRequest(){
  try {
    const URL = "https://jsonplaceholder.typicode.com/todos/1"
    const response = await axios.get(URL);
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

 is a fun little toy API server, which is great for this exercise, the resulting response object will be something like this, lets put our emphasis in the data property, which contains the response data sent by the server:

{
  // `data` is the response that was provided by the server
  data: {
    userId: 1,
    id: 1,
    title: "delectus aut autem",
    completed: false,
  },

  // `status` is the HTTP status code from the response
  status: 200,

  // `statusText` is the HTTP status message from the response
  statusText: "OK",

  // `headers` the HTTP headers that the server responded with
  // All header names are lower cased and can be accessed 
  // using the bracket notation.
  // Example: `response.headers['content-type']`
  headers: {},

  // `config` is the config that was provided for the request
  config: {},

  // `request` is the request that generated this response
  // The last ClientRequest instance in node.js (in redirects)
  request: {},
}

Step 3: Additional HTTP [POST / PUT / DELETE] requests using Axios

axios.post(url, data , options) , axios.put(url, data, options ) and axios.delete(url)

async function httpRequest() {
  try {
    const URL = "https://jsonplaceholder.typicode.com/posts";
    const postResponse = await axios.post(URL, {
      firstName: "Fred",
      lastName: "Flintstone",
    });
    console.log(postResponse);

    const putResponse = await axios.put(URL, {
      id: 101,
      firstName: "Freddie",
      lastName: "Flintstonian",
    });
    console.log(putResponse);

    const patchResponse = await axios.patch(URL, {
      firstName: "Fred",
      lastName: "Flintstone",
    });
    console.log(patchResponse);
  } catch (error) {
    console.error(error);
  }
}

Step 4: Using custom headers and custom configuration in our Axios HTTP requests

Often you will have the need to set custom request headers, or setting a custom request timeout, we can achieve this through the Axios request config option

async function httpRequest() {
  try {
    const config = {
      // We use the header object to customize request headers
      headers: { "X-Requested-With": "XMLHttpRequest" },
      // We can add our Post request data to the config object:
      data: {
        firstName: "Fred",
        lastName: "Flintstone",
      },
      // timeout sets a timeout limit in milliseconds 
      // for the requests, the default for each is 0
      timeout: 1000,
    };
    const response = await axios.post(
      "https://jsonplaceholder.typicode.com/posts",
      config
    );
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

Step 5: Dive into the hierarchy of error handling of Axios requests

To properly check for the Axios errors, to get the most amount of information, we need to check in the proper order:

In the following code we showcase the proper way to filter through these cases, using a catch block:

async function httpRequest(){
  try {
    const config = {
      	// We use the headers option, to add custom headers
   		headers: {'X-Requested-With': 'XMLHttpRequest'},
      	// We can add our post request data to the config object
      	data: {
            firstName: 'Fred',
            lastName: 'Flintstone'
        },
      	// timeout sets a timeout limit in milliseconds 
      	// for the requests, the default for each is 0
      	timeout: 1000,
    }
    const URL = 'https://jsonplaceholder.typicode.com/posts'
    const response = await axios.post(URL, config);
    console.log(response);
  } catch (error) {
      if (error.response) {
        // The request was made
        // the server responded with a status code
        // that falls out of the range of 2xx
        console.log(error.response.data);
        console.log(error.response.status);
        console.log(error.response.headers);
      } else if (error.request) {
        // The request was made but no response was received
        // `error.request` is an instance of XMLHttpRequest 
        // is an instance of http.ClientRequest in node.js
        console.log(error.request);
      } else {
        // Something happened in setting up the request 
        // that triggered an Error
        console.log('Error', error.message);
      }
      console.log(error.config);
    }
}

Step 6: Some fun Axios plugins to enhance its functionality

The first one we are going to showcase is, 

, and as its name states is a retry plugin for Axios, let us retry failed requests, and set retry conditions and timeouts for these requests:

Axios mock adapter allows us to easily create a mock server and attach it to our Axios instance, this is ideal for a controlled testing environment where you want to black-box your application

We've been through a lot, within this short post, but with these tools, you should be able to do the basic HTTP operations with Axios.

Have fun doing HTTP requests to an API, or crawling a website (while being responsible!) or just pinging your services through to know if they are alive.

Check out the documentation of the modules we used in this post:

If you have any questions - or want feedback on your post - come join 

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

Axios JS & Node.js a match made in heaven for API consumption

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript