I'm currently using isomorphic fetch and I am very disappointed with the lack of support for progress. What can I do ?
Cheers π» !
I'm using fetch too, but about progress management, i've based it on websocket instead.
I'm curious: what's your setup for an isomorphic app based on react and redux? Do you have a boilerplate?
I prefer
axiosoverfetchbecause it treats bad server response status codes as errors out of the box, no need to add that in as one would have to do with fetch:function getURL (url) { return fetch(url) .then((response) => { if (!response.ok) { throw new Error(response.statusText) } return response }) }The above boilerplate is not required when using modules like
axios, as they tend to do this automatically.With
fetch, handling CORS is also a lot more difficult than with modules likeaxios.As for progress tracking, remember that
fetchis a lower-level API thanXMLHttpRequest. If you want to observe progress, you would likely have to use the latter (although, streams will breathe progress tracking into thefetchapi as soon as it lands).For uploading files with XHR, it's pretty simple - track how big the file is, and how much has uploaded - calculate a percentage and you know your progress. For downloads, you'd have to read the
Content-Lengthheader from the server response and compare with how much has already been downloaded. You'd listen for these onxhr.upload.onprogressandxhr.onprogressfor upload and download, respectively.All of this is included out of the box in
axios, however - so just use that. Don't fall victim to Not Invented Here syndrome.