In addition to the native fetch() function, there are several third-party libraries available for making HTTP requests in JavaScript. One of the most popular libraries is Axios (Axios Docs). These libraries offer additional features and benefits that can simplify working with APIs and improve code readability.

Why Use Axios or Other Libraries Over Native fetch()?

While the fetch() API is powerful, it has some limitations that third-party libraries like Axios address:

• Automatic JSON Parsing: Axios automatically parses JSON responses, whereas with fetch(), you have to manually call response.json();
• Timeouts: Axios allows you to set timeouts for requests, which is not natively supported by fetch();
• Request and Response Interceptors: Axios provides interceptors that allow you to run functions before a request is sent or after a response is received, which is useful for adding authentication tokens or logging requests;
• Simpler Syntax: Axios has a simpler and more consistent syntax for making requests and handling responses;
• Support for Older Browsers: Axios has built-in support for older browsers that may not fully support the native fetch() API.

Basic Usage of Axios

Axios provides a simple syntax for making both GET and POST requests. It returns Promises, just like fetch(), but handles some of the repetitive tasks like parsing JSON automatically.

GET Request with Axios

This example demonstrates using Axios for a GET request. The getPostWithAxios function calls axios.get() to fetch data from an API endpoint (/posts/1). Axios simplifies the process by automatically parsing the JSON response, eliminating the need for a separate .json() call. The try...catch block handles any errors, displaying either the post title or an error message in the HTML.

POST Request with Axios

This example demonstrates a POST request using Axios to send data to an API. The sendPostWithAxios function calls axios.post() with the API endpoint (/posts) and data for a new post, including title, body, and userId. Axios automatically sends the data as JSON, simplifying the process. The try...catch block handles any errors, displaying either the created post title or an error message in the HTML.

Handling Errors with Axios

Axios provides an easy-to-use mechanism for error handling. If the request fails (e.g., network issue or server error), Axios automatically throws an error, which can be handled using try...catch.

This example demonstrates error handling with Axios. The getInvalidPost function attempts to fetch data from a non-existent endpoint using axios.get(). When the request fails, Axios automatically throws an error. The try...catch block catches this error, displaying the error message in the HTML.

Additional Features and Benefits of Axios

Let's explore some additional features of Axios.

Request and Response Interceptors

Axios allows you to intercept requests and responses to modify them before they are handled. This is useful for adding authentication tokens, logging requests, or handling global error management.

axios.interceptors.request.use(
  config => {
    // Modify request config (e.g., add authentication token)
    config.headers.Authorization = 'Bearer token';
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

Timeout Support

Axios allows you to set timeouts for requests, which ensures that the request does not hang indefinitely.

axios
  .get('https://jsonplaceholder.typicode.com/posts/1', { timeout: 5000 })
  .then(response => console.log(response.data))
  .catch(error => console.error('Request timed out', error));

Simplified Error Handling

Axios automatically throws errors when a response status falls outside the 2xx range, so you can handle failures in a standardized way.

Browser Support

Axios works across all modern browsers and provides polyfills for older browsers, making it a more versatile option for some projects.