I am calling the web service by using Fetch but the same I can do with the help of Axios. So now I am confused. Should I go for either Axios or Fetch?
-
5I think this has been discussed in a great detail over github.com/mzabriskie/axios/issues/314– Jaydeep SolankiJan 29, 2017 at 20:02
-
1Although there are many answers but I find nobody mentions the request timeout that axiso has over fetch.– QiulangDec 30, 2020 at 2:42
11 Answers
Fetch and Axios are very similar in functionality, but for more backwards compatibility Axios seems to work better (fetch doesn't work in IE 11 for example, check this post)
Also, if you work with JSON requests, the following are some differences I stumbled upon with.
Fetch JSON post request
let url = 'https://someurl.com';
let options = {
method: 'POST',
mode: 'cors',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json;charset=UTF-8'
},
body: JSON.stringify({
property_one: value_one,
property_two: value_two
})
};
let response = await fetch(url, options);
let responseOK = response && response.ok;
if (responseOK) {
let data = await response.json();
// do something with data
}
Axios JSON post request
let url = 'https://someurl.com';
let options = {
method: 'POST',
url: url,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json;charset=UTF-8'
},
data: {
property_one: value_one,
property_two: value_two
}
};
let response = await axios(options);
let responseOK = response && response.status === 200 && response.statusText === 'OK';
if (responseOK) {
let data = await response.data;
// do something with data
}
So:
- Fetch's body = Axios' data
- Fetch's body has to be stringified, Axios' data contains the object
- Fetch has no url in request object, Axios has url in request object
- Fetch request function includes the url as parameter, Axios request function does not include the url as parameter.
- Fetch request is ok when response object contains the ok property, Axios request is ok when status is 200 and statusText is 'OK'
- To get the json object response: in fetch call the json() function on the response object, in Axios get data property of the response object.
-
Here is more question. Once responseOk is true, do we need to check the status in response.data if it has status provided? thanks May 24, 2020 at 0:36
-
5
Axios request is ok when status is 200 and statusText is 'OK'
What about other httpStatus in the 2xx range like 201 or 204?– leonbloyMay 26, 2020 at 17:37 -
or I think
response.ok
is a boolean, and thetrue
orfalse
value indicates whether response was ok. User offline is handled by thefetch()
rejecting, but other types of server error is handled byresponse.ok
Feb 11, 2021 at 12:54
They are HTTP request libraries...
I end up with the same doubt but the table in this post makes me go with isomorphic-fetch
. Which is fetch
but works with NodeJS.
http://andrewhfarmer.com/ajax-libraries/
The link above is dead The same table is here: https://www.javascriptstuff.com/ajax-libraries/
-
7Still I am not able to find the benefit of fetch over axios. Can you have any idea why I should go with the axios? Nov 28, 2016 at 12:50
-
4I think fetch is a standard see fetch.spec.whatwg.org ... axios could have more features because it doesn't follow that.... I think in the end they do the basics (ajax http request) but it depends on what you need... I didn't need a transformer ... so getting a standard lib is a pro... Nov 28, 2016 at 12:59
-
5Be aware that that table is misleading. It defines
fetch
as Native (Meaning you can just use it - no need to include a library, accordingly to the table source), while actuallyfetch
is not implemented in some platforms (notably in all versions of IE), for which you need to provide an external polyfill anyway. Apr 20, 2017 at 12:06 -
3Adding to the difference mentioned by @jack123 fetch also doesn't provide a basic ajax functionality like
timeout
(which is very weird) we have to use a separate module to implement this basic functionality. Oct 2, 2017 at 15:00 -
2
According to mzabriskie on GitHub:
Overall they are very similar. Some benefits of axios:
Transformers: allow performing transforms on data before a request is made or after a response is received
Interceptors: allow you to alter the request or response entirely (headers as well). also, perform async operations before a request is made or before Promise settles
Built-in XSRF protection
please check Browser Support Axios
I think you should use axios.
-
4Agreed. Axios is also small enuff import so that bloat is not much concern - as opposed to something like express or mongoose where if one is a bit insane about package size, they might be concerned. :) Aug 13, 2018 at 12:18
One more major difference between fetch API & axios API
- While using service worker, you have to use fetch API only if you want to intercept the HTTP request
- Ex. While performing caching in PWA using service worker you won't be able to cache if you are using axios API (it works only with fetch API)
-
7Can anyone verify this is really true? It is 1 person, but the 9 upvotes seem to agree yet it would be nice to see comments on this ( I'm using axios with service worker pwa offline is why I ask. Dec 3, 2019 at 23:11
-
Sure, we can have few more comments on this but I was facing issues with caching while using axios and when I replaced axios with fetch() APIs it got resolved Jan 13, 2020 at 10:09
-
1This seems to be correct, but might be fixed in a near future: github.com/axios/axios/pull/2891– arkhzJun 25, 2020 at 7:08
Axios is a stand-alone 3rd party package that can be easily installed into a React project using NPM.
The other option you mentioned is the fetch function. Unlike Axios, fetch()
is built into most modern browsers. With fetch you do not need to install a third party package.
So its up to you, you can go with fetch()
and potentially mess up if you don't know what you are doing OR just use Axios which is more straightforward in my opinion.
-
2Fetch is ok, but Axios is like you said - more straightforward. That which is built into modern browsers (fetch) isn't that great for feature releases. - so I prefer Axios Dec 3, 2019 at 23:14
Fetch API, need to deal with two promises to get the response data in JSON Object property. While axios result into JSON object.
Also error handling is different in fetch, as it does not handle server side error in the catch block, the Promise returned from fetch() won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing. While in axios you can catch all error in catch block.
I will say better to use axios, straightforward to handle interceptors, headers config, set cookies and error handling.
Benefits of axios:
- Transformers: allow performing transforms on data before request is made or after response is received
- Interceptors: allow you to alter the request or response entirely (headers as well). also perform async operations before request is made or before Promise settles
- Built-in XSRF protection
In addition... I was playing around with various libs in my test and noticed their different handling of 4xx requests. In this case my test returns a json object with a 400 response. This is how 3 popular libs handle the response:
// request-promise-native
const body = request({ url: url, json: true })
const res = await t.throws(body);
console.log(res.error)
// node-fetch
const body = await fetch(url)
console.log(await body.json())
// Axios
const body = axios.get(url)
const res = await t.throws(body);
console.log(res.response.data)
Of interest is that request-promise-native
and axios
throw on 4xx response while node-fetch
doesn't. Also fetch
uses a promise for json parsing.
-
1@baitun these are from me running unit tests which (I think I was using Mocha) often have a
.throws
method to test errors thrown. In this case I was testing rejections from al 3 libs and noticed the difference in the data that was returned. Nov 5, 2018 at 0:02
With fetch, we need to deal with two promises. With axios, we can directly access the JSON result inside the response object data property.
A job I do a lot it seems, it's to send forms via ajax, that usually includes an attachment and several input fields. In the more classic workflow (HTML/PHP/JQuery) I've used $.ajax()
in the client and PHP on the server with total success.
I've used axios for dart/flutter but now I'm learning react for building my web sites, and JQuery doesn't make sense.
Problem is axios is giving me some headaches with PHP on the other side, when posting both normal input fields and uploading a file in the same form. I tried $_POST
and file_get_contents("php://input")
in PHP, sending from axios with FormData or using a json construct, but I can never get both the file upload and the input fields.
On the other hand with Fetch I've been successful with this code:
var formid = e.target.id;
// populate FormData
var fd = buildFormData(formid);
// post to remote
fetch('apiurl.php', {
method: 'POST',
body: fd,
headers:
{
'Authorization' : 'auth',
"X-Requested-With" : "XMLHttpRequest"
}
})
On the PHP side I'm able to retrieve the uploads via $_FILES
and processing the other fields data via $_POST:
$posts = [];
foreach ($_POST as $post) {
$posts[] = json_decode($post);
}
Axios is an HTTP client library based on promises whereas Fetch is a javascript API for making API requests.
- The Main difference is browser support: Axios supports all browsers including IE whereas Fetch is supported by the latest browser only and IE does not support it.
Reference link:https://github.com/axios/axios#browser-support
- Axios has better error handling compare to fetch API. Axios can throw 400 to 500 range status code errors whereas in fetch API you need to manually handle the errors. For more: https://bariablogger.in/f/axios-vs-fetch-react