Introduction
In modern web development, making HTTP requests is a fundamental task. Whether you're fetching data from a server, submitting forms, or interacting with APIs, you need reliable tools to handle these operations. While JavaScript provides a built-in fetch API for making HTTP requests, many developers opt for third-party libraries like Axios for added functionality and convenience.
Why Do We Need HTTP Request Tools?
Handling HTTP requests and responses can be complex, especially when considering error handling, response parsing, and request configuration. Tools like Axios and Fetch simplify these tasks by providing abstractions and utilities that streamline the process. They help address common problems such as:
Boilerplate Code: Simplifying repetitive tasks like setting headers and handling JSON responses.
Error Handling: Providing more consistent and manageable error handling mechanisms.
Interceptors: Allowing pre-processing of requests or responses, such as adding authentication tokens.
Fetch API
The Fetch API is a modern, built-in JavaScript method for making HTTP requests. It is promise-based, providing a more straightforward way to work with asynchronous operations compared to older methods like XMLHttpRequest.
Example
// Making a GET request using Fetch
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('There was a problem with the fetch operation:', error));
Axios
Axios is a popular third-party library for making HTTP requests. It is promise-based like Fetch but includes many additional features that make it more convenient and powerful.
Example
// Making a GET request using Axios
axios.get('https://api.example.com/data')
.then(response => console.log(response.data))
.catch(error => console.error('There was a problem with the axios request:', error));
Key Differences
1. Default Handling of JSON
- Fetch:
Requires manual conversion of response data to JSON.
fetch('https://api.example.com/data')
.then(response => response.json()) // Manual conversion
.then(data => console.log(data));
- Axios:
Automatically parses JSON responses.
axios.get('https://api.example.com/data')
.then(response => console.log(response.data)); // Automatic conversion
2. Error Handling
- Fetch:
Only rejects a promise for network errors, not for HTTP errors (e.g., 404 or 500 status codes).
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.catch(error => console.error('Fetch error:', error));
- Axios:
Rejects a promise for both network errors and HTTP errors.
axios.get('https://api.example.com/data')
.catch(error => console.error('Axios error:', error));
3. Request Configuration
- Fetch:
Requires manual configuration of options like headers and method
fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ key: 'value' })
});
- Axios:
Provides a more concise and readable syntax for configuration.
axios.post('https://api.example.com/data', { key: 'value' }, {
headers: {
'Content-Type': 'application/json'
}
});
Interceptors
Interceptors are a powerful feature in Axios that allow you to intercept requests or responses before they are handled by then or catch. They are useful for tasks like adding authentication tokens to every request or handling errors globally.
Example of Axios Interceptors
// Adding a request interceptor
axios.interceptors.request.use(config => {
// Add an authorization header to every request
const token = 'your_token';
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, error => {
// Handle request error
return Promise.reject(error);
});
// Adding a response interceptor
axios.interceptors.response.use(response => {
// Handle successful response
return response;
}, error => {
// Handle response error
if (error.response.status === 401) {
// Handle unauthorized error
console.error('Unauthorized');
}
return Promise.reject(error);
});
Conclusion
Both Fetch and Axios are capable tools for making HTTP requests, but they offer different levels of convenience and functionality. Fetch is a native, modern option that works well for simple use cases, while Axios provides a richer feature set, including automatic JSON handling, better error management, and interceptors for request and response manipulation. Choosing between them depends on the specific needs of your project and your preference for simplicity versus functionality.
By understanding the strengths and differences of each tool, you can make more informed decisions and write more efficient and maintainable code.
Top comments (19)
Hmmm, so let's see about this: The current
axios
NPM package weighs 2MB. In exchange for adding a significant chunk of those 2MB, we get things like errors on HTTP non-OK responses, which is bad for me (and I bet others) because, for example, I want to collect the body respones for HTTP 400 responses to provide the feedback to users. HTTP response 401 is another example: I need it in order to redirect the user to a login screen.Sure, I can always do a
catch
. But, withfetch
, which costs 0 bytes and is also available in Node, I don't need thecatch
. I merely need to do aswitch
on thestatusCode
property, or anif
on theok
property.Now, interceptors. Do I download 2MB to get a JSON token added to the header? Or do I do this?
"But then you'll have to do it for every data-retrieving function you have!" Eh, nope. Basic programming principles applied, I just create a
myFetch
function, a wrapper of the stockfetch
function that injects the token every time, with just a couple hundred bytes. Response interception? Same thing.So, is really
axios
a necessary, or even attractive enough package? Not all. Not for me, anyway. It adds very little value, IMHO.When
axios
was first being written fetch wasn't in the spec and then took a while to be everywhere. We had to use XMLHttpRequest everywhere and that really wasn't a nice experience.Axios
these days just usesfetch
directly, though does still have XMLHttpRequest as a fallback.All this to say I understand why
axios
exists and when people like something it tends to survive a long time even if it's not really needed anymore. I personally always usefetch
directly.Likewise, but I use nextjs, so I get all benefits of axios without even using it.
Why isn't axios needed for nextjs?
We've been using axios for all our API endpoints but all these comments have almost convinced me to change to fetch 😅 We're building a social network and performance really matters
i'm switching to fetch right away
Axios is 2MB? Can you share more info?
bundlephobia.com/package/axios@1.7.2
A minified gzipped version is only 13.2KB. No one is going to serve unminified ungziped version in their production.
Secondly axios is tree shakable, means only the required exports are being bundled, if the bundlers are configured properly.
I so prefer using fetch over axios, but the facts provide should be fair and not manipulated. Do people care for a 13.2KB, depends on the project and management.
npmjs.com/package/axios
That says 2MB. True, I did not realize until now that it is unpacked size. Still, the 2MB is there. I'm not trying to manipulate anybody.
The same argument can be brought against majority of other packages too. Vue is 2.2MB unpacked. Vanilla Js is just 0 MB. What does Vue do which can’t be done with vanilla js?
Now you're just being extremist, or you're missing the point entirely. One can forego the need of axios with very few additions that weigh very little; what Vue does for the developer is night and day: It allows control of the DOM declaratively. Vanilla JS doesn't have this capability. Therefore your argument is definitely false, and even misleading.
Hello ! Don't hesitate to put colors on your
codeblock
like this example for have to have a better understanding of your code 😎I really enjoy fetch. I removed Axios from my latest React project. I always prefer to depend as little as possible on third party packages.
Thanks for the information.
Intestingly, I wrote similar article today :)
dev.to/rahulvijayvergiya/fetch-vs-...
Most times, I feel axios is overkill in most cases. Fetch serves fine
Great article!
Thank you for the information.
Once again, Nextjs is very kind with us. We can achieve all the benefits of axios even using fetch API in Nextjs. Love You Nextjs. Nice article by the way.
You don't get that for free. Next is overwriting the native fetch with its own implementation, which, while likely smaller than Axios, is still part of the relatively large bundle size you will have in any Next app.
It would probably be better than trying to roll your own with React and Axios though!
Code can be enclosed within triple backticks to enable syntax highlighting in Dev.to
Some comments may only be visible to logged-in visitors. Sign in to view all comments.