What are the pros and cons of using native fetch versus a library like Axios?

Fetch is a built-in browser API for making HTTP requests.

Advantages of fetch:

• Built-in, no need to install additional libraries.
• Supports promises, which simplifies asynchronous code.
• Lightweight and modern API.

Disadvantages of fetch:

• No automatic JSON processing (you need to explicitly call response.json()).
• No built-in support for timeouts.
• Network errors and HTTP status errors are handled differently (fetch does not throw an error on HTTP 4xx/5xx).
• Fewer convenient functions for canceling requests, intercepting, and transforming data.

Axios is a third-party library for HTTP requests.

Advantages of Axios:

• Automatically transforms JSON.
• Supports timeouts and request cancellation via tokens.
• Handles HTTP errors as exceptions.
• Supports request and response interceptors.
• Works in both browsers and Node.js.

Disadvantages of Axios:

• Requires installing an additional dependency.
• The library size is larger than the built-in fetch.

Example of using fetch:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) throw new Error('HTTP error ' + response.status);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

Example of using Axios:

import axios from 'axios';

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