How to show progress of Axios during get request (not download or upload)

I want is to show a progressbar while Axios is getting my requests. axios package has both onDownloadProgress and onUploadProgress to show a progressbar during download or upload, but no progress bar during get request. I've searched a lot of questions and articles but they are always about download/upload progress or for Vue.js and I fail to understand how to do it in React.

I have the following code down below (which will not work because I'm not downloading).

Ideally, I'd write it myself; but I'm willing to consider using axios-progress package if someone could explain me how I'd integrate the loadProgressBar() with my Axios request.

request = () => { this.setState({error: null, results: []}) axios({ method: 'get', url: process.env.REACT_APP_API_LOCALS, responseType: 'json', onDownloadProgress: (progressEvent) => { var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total); this.setState({ loading: percentCompleted }) }, }) .then( (response) => { console.log(response) this.setState({ results: response.data.results, error: null, totalPages: Math.ceil(response.data.count / response.data.results.length) }) } ) .catch( (error) => { this.setState({ loading: null, error: true }) } ); } 

4 Answers

Here's what worked for me in React:

const client = axios.create({ baseURL: ' timeout: 20000 }) let result = await client.get('/fetchMeSomething', { onDownloadProgress: progressEvent => { const total = parseFloat(progressEvent.currentTarget.responseHeaders['Content-Length']) const current = progressEvent.currentTarget.response.length let percentCompleted = Math.floor(current / total * 100) console.log('completed: ', percentCompleted) } }) .then(res => { console.log("All DONE: ", res.headers) return res.data }) 

 axios .get("download something", { onDownloadProgress: (progressEvent) => { let downloadCount = DownloadCount( progressEvent.timeStamp, progressEvent.total, progressEvent.loaded ); let percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total ); setProgressing(percentCompleted); dispatch({ type: "downloading", payload: downloadCount.toFixed(1), }); }, }) .then((response) => {}) .catch((error) => { console.log(error); }); 

I think the reason why axios exposes both onUploadProgress and onDownloadProgress is that you can easily perform some calculation on bytes being transferred. In case of simple server request, I think using a flag such as setting on

state = { loading: false } 

and flip this to true whenever you make your request is ideal. You may use a spinner as a mask if you wish to.

I know you asked for a progress bar, but I've used this tutorial for creating a progress circle utilizing svg circles with the stroke-dasharray and stroke-dashoffset properties.

The whole thing is done in React so it should be a pretty easy implementation for you.