Axios

Axios is a popular, promise-based HTTP client that works both in the browser and in a Node.js environment. It provides a simple API for performing various types of HTTP requests and has a wide range of features like interceptors, timeout settings, and more. Axios is often used in modern web applications to interact with RESTful APIs or other external resources.

Features of Axios

1. Promise-based: Axios uses native ES6 Promises. This makes it easy to use async and await for more readable asynchronous code.

2. Interceptors: Allows you to intercept requests or responses before they are handled by then or catch.

3. Transforms: Allows you to transform the request and response data.

4. Cancellation: Supports canceling requests, which can be very useful for avoiding unnecessary API calls.

5. Automatic JSON data transformation: Axios automatically converts HTTP responses to JSON, saving you an extra step.

6. Client-Side Protection Against XSRF: Axios has built-in CSRF protection which is important for web security.

Basic Usage

Here's a simple example of a GET request:

const axios = require('axios');

axios.get('https://api.example.com/items')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

For a POST request:

axios.post('https://api.example.com/items', { item: 'new item' })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

Using async and await

async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/items');
    console.log(response.data);
  } catch (error) {
    console.log(error);
  }
}

Interceptors

You can intercept requests or responses before they are handled by then or catch.

// Add a request interceptor
axios.interceptors.request.use(config => {
  // Do something before the request is sent
  return config;
}, error => {
  // Do something with the request error
  return Promise.reject(error);
});

// Add a response interceptor
axios.interceptors.response.use(response => {
  // Do something with the response data
  return response;
}, error => {
  // Do something with the response error
  return Promise.reject(error);
});

Error Handling

Axios provides robust error handling through its Promise-based architecture. You can easily catch errors in the catch block.

axios.get('https://api.example.com/items')
  .catch(error => {
    if (error.response) {
      // The request was made and the server responded with a status code outside of the range of 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      console.log(error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
  });

Axios is a versatile and efficient HTTP client for JavaScript, and it's a common choice for developers due to its wide range of features and ease of use.