What is Axios and why use it over Fetch API?

Axios is a popular JavaScript library specifically designed for making HTTP requests from either a web browser or a Node.js application. When it comes to making HTTP requests in JavaScript, two popular choices are Axios and the Fetch API.

Both have their own advantages and use cases, but many developers prefer Axios for its simplicity and additional features. It simplifies the process compared to using the built-in Fetch API by offering a cleaner syntax, automatic features, and more control over your requests.

Lets explore a detailed comparison to help understand why Axios might be a better choice than Fetch.

Basic Syntax

Axios:

axios.post('https://jsonplaceholder.typicode.com/posts', {
  a: 10,
  b: 20
}, {
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  }
}).then(response => {
  console.log(response.data);
});

Fetch:

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  },
  body: JSON.stringify({
    a: 10,
    b: 20
  })
}).then(response => response.json())
  .then(data => {
    console.log(data);
  });

Key Differences

1. Automatic JSON Data Transformation:

   • Axios: Automatically transforms JSON data, both when sending and receiving.

   • Fetch: Requires manual transformation using JSON.stringify for sending and response.json() for receiving.

2. Response Timeout:

   • Axios: Allows setting a timeout easily using the timeout property.

   • Fetch: Requires using AbortController to implement timeouts, which is more complex.

3. HTTP Interceptors:

   • Axios: Supports request and response interceptors, allowing you to modify requests or handle responses globally.

   • Fetch: Does not support interceptors natively, requiring custom implementations.

4. Download Progress:

   • Axios: Can track download progress using the onDownloadProgress event.

   • Fetch: Does not support progress tracking natively.

5. Simultaneous Requests:

   • Axios: Provides axios.all and axios.spread for handling multiple requests simultaneously.

   • Fetch: Can achieve similar functionality using Promise.all.

6. Error Handling:

   • Axios: Automatically handles HTTP errors and provides detailed error messages.

   • Fetch: Only rejects the promise on network errors, requiring manual handling of HTTP errors.

7. Browser Compatibility:

   • Axios: Supports older browsers like IE11 by using XMLHttpRequest under the hood.

   • Fetch: Only supports modern browsers, but can be polyfilled for older ones.

Conclusion

While both Axios and Fetch are capable of making HTTP requests, Axios offers a more feature-rich and developer-friendly experience. If you need a simple, native solution and are targeting modern browsers, Fetch might be sufficient. However, for more complex applications, Axios provides the additional functionality and ease of use that can significantly improve your development workflow.