How to use Axios with Async/Await in JavaScript?

Wed Sep 07 2022

3 min read

Axios is a promise-based HTTP client that lets you handle asynchronous HTTP requests. This guide will demonstrate how to handle these requests through async/await.

Let’s take a look at Axios.

What is Axios?

You can use different ways to make API calls in your applications. You can choose either the built-in fetch API or third-party libraries. In the latter case, Axios is one of the most popular data fetching packages available on npm.

Axios is an open-source, promise-based HTTP client. It uses JavaScript’s promises to send HTTP requests and manage their responses. Moreover, it offers additional features for fetching APIs that are not available in the basic Fetch API.

Without further ado, let’s see how we can make an API request using Axios with async/await.

Installation and Usage

To use Axios, you need to install it using npm or yarn.

sh
npm install axios

Once installed, import it into your JavaScript file.

js
import axios from 'axios';

Now, you can use the functions Axios provides for each HTTP method like these:

  • axios.get()
  • axios.post()
  • axios.put() and so on.

All these functions return promises, and we can resolve these promises with .then or async/await.

Axios Request Without Async/Await

Now, let’s see what an Axios GET request looks like without async/await, i.e., with .then. The axios.get function returns a promise. We use .then to resolve this promise into the API's response.

js
import axios from 'axios';
axios.get('https://famous-quotes4.p.rapidapi.com/random')
.then(response => {
// Handle response
console.log(response.data);
})
.catch(err => {
// Handle errors
console.error(err);
});

Here is what the API response looks like:

json
[
{
"id": 13190,
"text": "I don't have the best dating track record.",
"category": "dating",
"author": "Lauren Conrad"
},
{
"id": 75560,
"text": "I save every Christmas card. I keep them all.",
"category": "christmas",
"author": "Alison Sweeney"
}
]
Use this API
We are using a Random Quotes API from RapidAPI Hub, the biggest marketplace for APIs. Sign up on the Hub and try the API yourself.
Learn More

Axios Request With Async/Await

A better and cleaner way of handling promises is through the async/await keywords. You start by specifying the caller function as async. Then use the await keyword with the function call. Due to the await keyword, the asynchronous function pauses until the promise is resolved.

js
import axios from 'axios';
const getData = async () => {
const response = await axios.get(
`https://famous-quotes4.p.rapidapi.com/random`
);
};

As you can see, it looks cleaner than the .then approach and makes the code easier to read and maintain.

What About Error Handling?

With async/await, the error handling technique is different. To handle errors in a standard API call using Axios, we use a try...catch block. Inside the catch, we can handle errors. Here is an example:

js
try {
const res = await axios.get(`https://famous-quotes4.p.rapidapi.com/random`);
} catch (error) {
// Handle errors
}

For thorough error handling, you can read our guide on error handling with Axios. That is pretty much it. You are all set to use the Axios with async/await.