Hello Developers! All we are using either Axios OR fetch to communicate/exchange data with server. Both works perfect as per your requirement. Today we will go in detail and see how they are differ in terms of features they provide.
1. Request URL
Axios — has url in request object
axios
.get(url, {
headers: {
'Content-Type': 'application/json',
},
timeout: 1000 * 60,
})
.then(res => {
})
.catch(err => {
})
Fetch — has no url in request object.
fetch(url)
.then((response) => response.json())
.then((json) => {
})
.catch(() => {
})
2. Package
Axios — third-party package that you need to install manually. 85.3k Star in Github — Well managed & rich features library.
npm i axios
Fetch — is in-build into most of the browser, no more need of installation.
3. CSRF Protection
Axios — having in-build support of CSRF (Cross site request forgery) to prevent cross-site request.
Fetch — doesn’t support CSRF
4. Request Data
Axios — request data contain object, you can directly sent JSON Object in request data
axios
.post(url, jsonObject, {
headers: {
method: "POST",
headers: {
"Content-Type": "application/json",
},
},
timeout: 1000 * 60, // 1 min
})
.then((res) => {
if (res) {
return res.data;
}
})
.catch((err) => {
return err;
});
Fetch — request data should stringify
fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(jsonObject),
})
.then((response) => response.json())
.then((json) => {
})
.catch(() => {
});
If you want to start New React Project — Check out React Clean Architecture
5. Response Parsing
Axios — in-built transform response to JSON for
developers
axios
.post(url, jsonObject, {
headers: {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
},
timeout: 1000 * 60, // 1 min
})
.then(res => {
if (res) {
return res.data; // Directly get JSON in Step - 1 Only - Managed by Axios
}
})
.catch(err => {
return err;
})
fetch — has two step process, first response convert to json and then in second process developer will get json response
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(jsonObject)
}).then((response) => response.json()) // Response Convert To JSON in this Step - 1
.then((json) => {
// Get JSON Object Here in Step - 2
})
.catch(() => {
})
6. Cancel Request
Axios — In case user left the screen/component, axios allow developers to Cancel request
const cancelTokenSource = axios.CancelToken.source();
axios.get('/listing/1', {
cancelToken: cancelTokenSource.token
});
// Cancel request
cancelTokenSource.cancel();
Fetch - doesn’t support Cancel API request
Fetch — doesn’t support Cancel API request
7. Request Interceptor
Axios — having in-build feature of intercept HTTP Request
Fetch — Doesn’t provide a way to intercept http requests.
8. Upload/Download Request Progress
Axios — Support developers to provide data transmission progress so developers can show loading indicator while user communicating with server
Fetch — Doesn’t support Upload/Download progress
9. Browser Support
Axios — have side browser capability support
Fetch — only support limited browsers & version , like Chrome 42+, Firefox 39+, Edge 14+, Safari 10.1.
Thanks for reading Blog!
KPITENG | DIGITAL TRANSFORMATION
www.kpiteng.com/blogs | hello@kpiteng.com
Connect | Follow Us On - Linkedin | Facebook | Instagram
Top comments (7)
Interesting article, I've never really used Axios.
Fetch can use the Abort Controller API to cancel requests. Also progress is coming.
I think it would be very simple to write a wrapper for fetch with fallbacks in place for old browsers.
In fact here's a demo of loading progress. The loading is slowed down so you have time to see the bar do something.
The syntax is more complex than axios but it's built into the browser so will be faster.
Thanks for adding your valuable inputs, I will check and update it. Thanks
I’ve been working in project that uses fetch and axios and in my opinion, axios is more efficiency than fetch. I dont know axios perfs, but I believe that fetch is fast, but axios is fully customizable and for me is important.
Also, AFAIK
fetch
does not sends cookies by default.Not cross origin but same origin it does.
Nice article