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

user_10133180 0
Viewed 36207

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
            })  
        }
    );
}
axios get-request reactjs loading
4 Answers

Here's what worked for me in React:

const client = axios.create({
  baseURL: 'http://localhost:10000/v1/client',
  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
})
user_17761630 
  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);
  });
user_128234470

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.

user_109181120

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.

https://css-tricks.com/building-progress-ring-quickly/

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

user_73929390
Related