How to use Axios with Async/Await in JavaScript?

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
Copy
npm install axios

Once installed, import it into your JavaScript file.

js
Copy
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
Copy
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
Copy
[
  {
    "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"
  }
]

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
Copy
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. You can do the same for Axios POST, PUT, DELETE, and other requests.

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