Axios – Promise-based HTTP Client for Browsers and Node.js

Overview

Axios functions as an HTTP client for JavaScript, enabling developers to send asynchronous HTTP requests from web browsers and Node.js environments. Its core design is promise-based, which aligns with modern JavaScript asynchronous programming patterns, offering a clear way to manage responses and errors. Axios simplifies the process of interacting with RESTful APIs and other web services by providing a consistent and intuitive API for various HTTP methods like GET, POST, PUT, and DELETE.

The library is particularly suited for applications requiring robust control over HTTP communications. This includes single-page applications (SPAs) that frequently fetch and send data to a backend, Node.js microservices that communicate with external APIs, and any project where automatic JSON data transformation is beneficial. Axios automatically transforms request and response data to and from JSON, reducing boilerplate code. It also supports URL-encoded forms and other data formats, offering flexibility for different API requirements. Developers can configure global defaults for requests, which streamlines setup for applications interacting with a single primary API endpoint.

A significant feature of Axios is its support for interceptors. These allow developers to intercept requests before they are sent and responses before they are passed to .then() or .catch() handlers. This capability is used for tasks such as adding authentication tokens to outgoing requests, logging request details, or handling global error conditions from responses, like redirecting on a 401 Unauthorized status. This centralized handling of common concerns contributes to cleaner and more maintainable codebases by separating cross-cutting concerns from individual request logic.

Axios also provides a cancellation API, allowing developers to cancel ongoing requests. This is useful in scenarios where a user navigates away from a page before a request completes or when a new request supersedes an older one, preventing unnecessary resource consumption and potential race conditions. Its error handling mechanisms are granular, distinguishing between network errors, response errors (like 4xx or 5xx status codes), and request timeouts, providing specific information to diagnose issues. The library is entirely free and open-source, making it a common choice in the JavaScript ecosystem due to its functionality and widespread adoption.

Key features

• Promise-based API: Utilizes JavaScript Promises for asynchronous operations, offering a familiar and chainable syntax for handling HTTP responses and errors, as detailed in the Axios documentation on promises.
• Automatic JSON transformation: Automatically serializes JavaScript objects to JSON in requests and deserializes JSON responses into JavaScript objects, reducing manual parsing and stringification.
• Request and response interception: Allows developers to define functions that can modify or inspect requests before they are sent and responses before they are processed by application code. This is useful for authentication, logging, or error handling.
• Browser and Node.js support: Provides a consistent API for making HTTP requests across both client-side JavaScript in browsers and server-side JavaScript in Node.js environments.
• Request cancellation: Offers a mechanism to cancel ongoing HTTP requests, which helps manage network resources and prevent outdated responses in dynamic user interfaces.
• Client-side XSRF protection: Includes built-in support for Cross-Site Request Forgery (XSRF) protection when running in the browser, by automatically handling and sending XSRF tokens.
• Configurable request defaults: Enables setting global or instance-specific default configurations for requests, such as base URLs, headers, and timeouts, streamlining common settings.
• Progress handling: Provides options to track the progress of uploads and downloads, useful for displaying progress bars for large file transfers.

Pricing

Axios is distributed under the MIT license, making it entirely free and open-source for all uses.

Pricing as of 2026-05-09.

Common integrations

• React applications: Frequently integrated into React projects for managing API calls within components or custom hooks, often alongside state management libraries like Redux or Zustand.
• Vue.js applications: Used within Vue.js components or Vuex stores to handle data fetching and submission to backend APIs, as demonstrated in many Vue.js example applications.
• Angular applications: While Angular has its own HttpClient module, Axios can be used as an alternative for developers preferring its specific API design, especially in projects migrating from other frameworks.
• Node.js backend services: Employed in Node.js applications, including Express.js or NestJS microservices, for making outbound HTTP requests to other internal services or external third-party APIs.
• TypeScript projects: Fully compatible with TypeScript, providing type definitions that enhance developer experience with type checking and autocompletion for Axios methods and response structures.

Alternatives

• Fetch API: A native browser API for making network requests, offering a lower-level, promise-based interface without the need for external libraries.
• Superagent: A lightweight, progressive AJAX request library for Node.js and browsers, known for its chainable API and plugin support.
• Node-fetch: A light-weight module that brings the browser's Fetch API to Node.js, providing a familiar API for server-side HTTP requests.
• XMLHttpRequest (XHR): The traditional browser API for making HTTP requests, which is callback-based and more verbose compared to modern promise-based alternatives.

Getting started

To begin using Axios, you first need to install it in your project. This can be done via npm or yarn. Once installed, you can import it and start making HTTP requests. The following example demonstrates how to perform a simple GET request to fetch data from a public API and log the response.

// 1. Install Axios
// npm install axios
// or
// yarn add axios

// 2. Import Axios into your project
import axios from 'axios';

// 3. Make a GET request to a public API
axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    // Handle the successful response
    console.log('Fetched data:', response.data);
    console.log('Status code:', response.status);
    console.log('Headers:', response.headers);
  })
  .catch(error => {
    // Handle any errors that occurred during the request
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      console.error('Error response data:', error.response.data);
      console.error('Error response status:', error.response.status);
      console.error('Error response headers:', error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      console.error('No response received:', error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.error('Error during request setup:', error.message);
    }
    console.error('Axios config:', error.config);
  })
  .finally(() => {
    // Always executed, regardless of success or failure
    console.log('Request complete.');
  });

// Example of a POST request
axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1,
  })
  .then(response => {
    console.log('POST request successful:', response.data);
  })
  .catch(error => {
    console.error('POST request failed:', error.message);
  });

// Example with async/await syntax
async function fetchUserData(userId) {
  try {
    const response = await axios.get(`https://jsonplaceholder.typicode.com/users/${userId}`);
    console.log(`User ${userId} data:`, response.data);
  } catch (error) {
    console.error(`Failed to fetch user ${userId}:`, error.message);
  }
}

fetchUserData(2);

This code snippet demonstrates Axios's promise-based interface using both .then()/.catch() and async/await for a GET request, along with a basic POST request. It also includes detailed error handling to differentiate between server responses, network issues, and request configuration problems, which is crucial for building resilient applications. The finally block illustrates how to execute code regardless of the request outcome, useful for cleanup or logging. This structured approach to making and handling HTTP requests is a key component of Axios's developer experience.