Learn
Learn
Learn web development from expert teachers. Build real projects, join our community, and accelerate your career
Get Started
Fullstack Rust Fullstack Node.js Fullstack D3 Fullstack React Fullstack React with TypeScript view all books →
The newline Guide to Building Your First GraphQL Server with Node and TypeScript
In this course, we'll show you how to create your first GraphQL server with Node.js and TypeScript
Enroll for free
Teach
Teach
Share your knowledge with others, earn money, and help people with their career
Apply Now
Apply To Teach A Course What Our Teachers Say
Amelia Wattenberger
Author of Fullstack D3
"Writing Fullstack D3 was a thoroughly enjoyable, fun process.

The writing was over before I knew it, and we've sold way more copies than I expected! Plus, the compliments from my peers have been really amazing."
Community
Community
Get help with programming projects, find collaborators, and make friends
Join Now
Explore new Communities Join our Discord Server What Our Students Say
Tutorials
Pricing

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

Last Updated: April 3rd, 2020

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

Responses (0)

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 Request.

The pros of using Axios are:

native ES6 Promise implementation.
It can be extended using modules.
It comes with TypeScript typing out of the box.
Proxy support.
Requests can be canceled using Cancel Tokens.
Able to handle multiple concurrent requests.
Automatic transforms for JSON data
Intercept request and response

What you will learn#

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

How to do HTTP requests from Node.js using Axios
Handling Axios promises using async-await.
How to handle Axios error elegantly.
A brief introduction to Axio's popular attachable modules, like retry and mock adapter.

Prerequisites - What You Need To Know#

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.

Step 1: install Axios#

Axios is available through most of the major Node package registry

Using npm:

Using yarn:

Step 2: A basic HTTP GET request using Axios#

To import Axios in our node app we do:

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:

jsonPlaceholder 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:

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

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

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

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:

Error response from the server: our request made it to the server, and we got a response, with a status code different than 200.
The request was made, but we got no response: this could be due to a timeout issue, or a critical error in the server where no response was provided back.
The request couldn't be made: this could be due to an internal exception, or due to network issue, or socket issue.

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, axios-retry, 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:

To install axios-retry using NPM we do

const axiosRetry = require("axios-retry");

// we attach the retry to our axious instance
axiosRetry(axios, {
  // The number of retry attempts
  retries: 3,

// The delay between retries attempts
  // receives a function to calculate the delay
  // axios provides a function exponentialDelay 
  // for exponential growth of delay
  retryDelay: axiosRetry.exponentialDelay,

// Defines if the timeout should be reset between retrie
  // Unless shouldResetTimeout is set
  // the plugin interprets the request timeout as a global value,
  // so it is not used for each retry 
  // but for the whole request lifecycle.
  shouldResetTimeout: true,

// Callback to further control if a request should be retried.
  // By default, it retries if it is a network or a 5xx error
  // on an idempotent request (GET, HEAD, OPTIONS, PUT or DELETE).
  // Use the axios error object to make desitions about the retry
  retryCondition: (axiosError) => {
    return true;
  },
});

async function httpRequest() {
  try {
    // we can make requests using the axios instance as usual
    // but now when the request fails we get an automatic retry 
    // based on our axiosRetry config
    const response = await axios.get(
      "https://jsonplaceholder.typicode.com/todos/1"
    );
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

Last but not least, let's try out the Axios mock adapter

To install axios-mock-adapter using NPM we do:

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

Conclusion#

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.

Have fun and keep coding!

More Resources#

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

Getting Help (and Feedback)#

If you have any questions - or want feedback on your post - come join our community Discord. See you there!

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community