Реакция: как показать прогресс Axios во время запроса на получение (не загрузка или выгрузка) - PullRequest
Новая
       25

Реакция: как показать прогресс Axios во время запроса на получение (не загрузка или выгрузка)

0 голосов
/ 16 января 2019

Я хочу показать прогресс-бар, пока Axios получает мои запросы.Пакет axios имеет как onDownloadProgress, так и onUploadProgress, чтобы отображать индикатор выполнения во время загрузки или выгрузки, но отсутствует индикатор выполнения во время запроса на получение.Я искал много вопросов и статей, но они всегда касаются прогресса загрузки / выгрузки или Vue.js, и я не понимаю, как это сделать в React.У меня есть следующий код ниже (который не будет работать, потому что я не загружаю).В идеале я бы написал это сам;но я готов рассмотреть возможность использования пакета axios-progress , если кто-то может объяснить мне, как я интегрирую loadProgressBar() с моим запросом Axios. 

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
            })  
        }
    );
}

Ответы [ 2 ]

0 голосов
/ 30 апреля 2019

Я знаю, что вы просили индикатор выполнения, но я использовал это руководство для создания круга выполнения, используя круги svg со свойствами stroke-dasharray и stroke-dashoffset.

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

Все это сделано в React, поэтому его реализация должна быть довольно простой для вас.

0 голосов
/ 16 января 2019

Я думаю, что причина, по которой axios выставляет и onUploadProgress, и onDownloadProgress, заключается в том, что вы можете легко выполнить некоторые вычисления переданных байтов.В случае простого запроса к серверу я думаю, что использование флага, такого как установка на 

state = {
  loading: false
}

, и переключение на true всякий раз, когда вы делаете свой запрос, является идеальным.Вы можете использовать блесну в качестве маски, если хотите.

...