When building web applications, one of the most common task is making API calls. Two of the most popular method in javascript is by using Fetch API and Axios.
What is Fetch API?
The Fetch API is built in Javascript feature available in modern browsers and allows you to make HTTP requests without installing any additional libraries. It works well for simple use cases but requires extra steps for error handling and JSON parsing.
Example:-
fetch("https://apiExample.com/data")
.then(res => res.json())
.then(data => console.log(data))
.catch(error => console.log(error))
The fetch() function is used to make network requests and returns a promise.
The .then() method handles the successful response, while .catch() handles any errors that occur during the request.
What is Axios?
Axios is an external library that makes HTTP requests easier and more powerful. It automatically converts responses to JSON, works in both browsers and Node.js, and has built-in support for request cancellation and better error handling.
Example:-
axios.get('https://api.example.com/data')
.then(res => console.log(res.data))
.catch(err => console.error(err));
The axios.get() method makes a GET request to the specified URL and returns a promise.
The .then() method handles the successful response, while .catch() handles any errors that occur during the request.
Key Difference:-
| Feature | Fetch API | Axios |
| Built-in | Yes | No |
| JSON parsing | No | Yes |
| Error Handling | Limited(Must check (response.ok) | Automatic |
| Environment | Browser only | Browser + Nodejs |
| JSON Parsing | Manual(.json) | Automatic |
Which one should you use?
Fetch is a great choice if you prefer a lightweight, native solution without the need for additional libraries.
Native Solution: Fetch is built into modern browsers, so no installation is needed.
Lightweight: If you prefer minimal dependencies, Fetch keeps your codebase slim.
Custom Error Handling & Parsing: You’ll need to manually handle error catching and JSON parsing, but this gives more control.
Axios is perfect if you need more advanced features and a higher level of convenience in handling requests.
Request/Response Interceptors: Easily handle requests and responses before they are sent or after they are received.
Automatic JSON Parsing: Axios automatically converts JSON responses, saving you time.
Request Cancellation: You can stop requests when needed.
Timeout Handling: Set a timeout for requests to avoid hanging indefinitely.
Progress Tracking: Easily track file uploads or downloads.
Simplified Error Handling: Axios simplifies the process of catching and managing errors.