Axios Documentation

Introduction

Axios is a popular JavaScript library used for making HTTP requests from web browsers and Node.js. It provides an easy-to-use interface for sending asynchronous HTTP requests to a server and handling the response. Axios supports various features such as interceptors, cancellation, automatic conversion of response data, and more.

This documentation provides a comprehensive guide to using Axios in your web applications or Node.js projects.

Installation

You can install Axios using npm (Node Package Manager) or yarn. Open your terminal or command prompt and run one of the following commands:

Using npm:

Copy code
npm install axios

Using yarn:

csharpCopy code
yarn add axios

Basic Usage

Importing Axios

To use Axios in your JavaScript code, you need to import it:

javascriptCopy code
// ES6 syntax
import axios from 'axios';

// CommonJS syntax
const axios = require('axios');

Making a GET Request

Once you have imported Axios, you can use it to make HTTP requests. The following example demonstrates making a GET request to retrieve data from a server:

javascriptCopy code
axios.get('/api/data')
  .then(response => {
    // Handle the response data
    console.log(response.data);
  })
  .catch(error => {
    // Handle the error
    console.error(error);
  });

Making POST, PUT, DELETE, and Other Requests

Axios supports various HTTP request methods such as POST, PUT, DELETE, and more. Here's an example of making a POST request:

javascriptCopy code
axios.post('/api/data', { name: 'John', age: 30 })
  .then(response => {
    // Handle the response data
    console.log(response.data);
  })
  .catch(error => {
    // Handle the error
    console.error(error);
  });

You can replace post with other request methods like put, delete, patch, etc., to make the corresponding HTTP requests.

Handling Request Parameters

Axios allows you to specify request parameters such as headers, query parameters, request body, etc., using an optional configuration object. Here's an example of including request headers and query parameters:

javascriptCopy code
axios.get('/api/data', {
  headers: {
    'Authorization': 'Bearer token123',
    'Content-Type': 'application/json'
  },
  params: {
    sort: 'asc',
    limit: 10
  }
})
  .then(response => {
    // Handle the response data
    console.log(response.data);
  })
  .catch(error => {
    // Handle the error
    console.error(error);
  });

Handling Interceptors

Axios provides interceptors that allow you to intercept and modify HTTP requests or responses before they are handled by your code. You can use interceptors for various purposes, such as adding headers, logging, error handling, etc. Here's an example of adding a request interceptor:

javascriptCopy code
axios.interceptors.request.use(config => {
  // Modify the request configuration
  config.headers['Authorization'] = 'Bearer token123';
  return config;
});

Similarly, you can add a response interceptor using axios.interceptors.response.use().

Cancellation

Axios supports cancellation of requests, which allows you to cancel an ongoing request if needed. You can create a cancellation token using the CancelToken provided by Axios. Here's an example:

javascriptCopy code
const { CancelToken } = axios;
const source = CancelToken.source();

axios.get('/api/data', {
  cancelToken: source.token
})
  .then(response => {
    // Handle the response data
    console.log(response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      // Request was canceled
      console.log('Request canceled:', error.message);
    } else {
      // Handle other errors
      console.error(error);
    }
  });

// Cancel the request
source.cancel('Operation canceled by the user.');

Conclusion

This documentation provided an overview of the basic usage of Axios, including making HTTP requests, handling parameters, interceptors, cancellation, and more. It should serve as a starting point for integrating Axios into your web applications or Node.js projects. For more advanced usage and detailed information, refer to the official Axios documentation available at https://axios-http.com/docs/intro.