Hey Paramveer

Using Axios for HTTP Requests in JavaScript

Written by

Paramveer Singh

in

When working with APIs in JavaScript, making HTTP requests efficiently and handling responses gracefully are key tasks. While the built-in fetch() API works well for many scenarios, Axios offers a more powerful and developer-friendly way to handle HTTP requests. In this article, we’ll explore what Axios is, why it’s useful, and how to use it effectively in your JavaScript projects.

What Is Axios?

Axios is a popular promise-based HTTP client for both browser and Node.js environments. It simplifies sending asynchronous HTTP requests to REST endpoints and handling responses. Its intuitive syntax, built-in error handling, and support for features like request cancellation, interceptors, and automatic JSON transformation make it a top choice for developers.

Why Use Axios?

Here are some advantages of using Axios over the native fetch() API:

  1. Automatic JSON transformation: Axios automatically converts response data to JSON.
  2. Error handling: Axios distinguishes between client-side, server-side, and network errors more clearly.
  3. Interceptors: You can easily modify requests or responses before they are handled.
  4. Timeouts and cancellation: Axios supports request timeouts and cancel tokens.
  5. Browser support: Axios works well across modern browsers and Node.js.

Installing Axios

You can install Axios using npm, yarn, or a CDN.

Using npm:

npm install axios

Using yarn:

yarn add axios

Using CDN (for browser projects):

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

Making a GET Request

A simple GET request using Axios looks like this:

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

Here, Axios automatically parses the JSON response and makes it accessible via response.data.

Making a POST Request

To send data to a server, use a POST request:

axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: 'New Post',
  body: 'This is an example post.',
  userId: 1
})
.then(response => {
  console.log('Post created:', response.data);
})
.catch(error => {
  console.error('Error creating post:', error);
});

Using Async/Await with Axios

Modern JavaScript supports async/await, which makes asynchronous code cleaner and easier to read:

const fetchPosts = async () => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching posts:', error);
  }
};

fetchPosts();

This syntax eliminates nested .then() and .catch() chains, improving code readability.

Adding Request Headers

You can easily add headers to your requests, such as authentication tokens:

axios.get('https://api.example.com/user', {
  headers: {
    'Authorization': 'Bearer your_token_here'
  }
});

Setting a Base URL

If you make multiple requests to the same API, you can set a base URL:

const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com'
});

api.get('/users').then(res => console.log(res.data));

This helps keep your code clean and consistent.

Handling Errors

Axios provides detailed error information. You can check the type of error like this:

axios.get('/invalid-url')
  .catch(error => {
    if (error.response) {
      console.log('Server responded with error:', error.response.status);
    } else if (error.request) {
      console.log('No response received:', error.request);
    } else {
      console.log('Request error:', error.message);
    }
  });

Conclusion

Axios is a versatile and reliable HTTP client for JavaScript developers. Its powerful features—like automatic JSON parsing, interceptors, and built-in error handling—make working with APIs much smoother than using raw fetch(). Whether you’re building a small app or a large-scale project, Axios can save you time and improve code clarity.

By integrating Axios into your JavaScript workflow, you can handle API requests more effectively and write cleaner, more maintainable code.

More posts