С помощью Axios
При создании интерактивных приложений пользовательский интерфейс всегда является краеугольным камнем. По возможности всегда оставляйте отзывы о действиях пользователя. Один из распространенных случаев отображения индикаторов загрузки происходит при запросе данных с сервера.
Но как вы можете отслеживать ход выполнения ваших запросов на выборку? В этой статье мы рассмотрим, как это легко сделать с помощью Axios.
Настройка проекта
Я использую create-react-app для создания нового проекта React. Чтобы сэкономить время на стилизации всего, я использую этот репозиторий GitHub из моего предыдущего руководства. Он также включает функцию, которая имитирует выполнение сетевого запроса. Позже мы изменим эту функцию, чтобы отслеживать ход выполнения реального сетевого запроса.
Я заменил App.css репозиторием стили в GitHub, а также шаблон внутри App.js:
Я также скопировал содержимое из app.js и добавил функцию загрузки для кнопки. Также сейчас хорошее время для установки нашей единственной зависимости: axios. Запустите npm i axios. Когда все настроено, у вас должно быть то же приложение, что и в связанном репозитории GitHub, за исключением того, что сейчас все находится в React.
Использование хуков для изменения состояния
На данный момент DOM управляется непосредственно из компонента. Чтобы делать что-то в стиле React, давайте изменим состояние на использование хуков. Во-первых, давайте начнем с процента.
Если вас интересует, как хуки работают в React, у меня есть руководство, в котором более подробно рассказывается. Вы можете найти его по ссылке.
Импортируйте useState из React и создайте его экземпляр со значением 0 в строке: 5. Мы можем удалить переменную percentage внутри функции download, а также заменить присвоение в строке: 26 на setPercentage, передав текущий прогресс.
То же самое можно сделать с переключением классов и текста на кнопке. Создайте отдельное состояние для прогресса и повторите те же шаги:
Отслеживание прогресса с помощью Axios
Теперь мы можем начать работу по отслеживанию прогресса. Для этого мы запросим несколько больших изображений. Вытяните axios и внутри своей download функции создайте новый запрос GET.
Axios имеет onDownloadProgress метод конфигурации запроса для обработки хода выполнения запрошенного ресурса. Если вы войдете в консоль, то увидите, что по мере загрузки мы получаем ProgressEvent объект с полезной информацией.
Например, количество загруженных байтов и общий размер запроса. Исходя из этого, мы можем рассчитать ход выполнения запроса. Измените свою download функцию следующим образом:
Код не требует пояснений. Внутри обратного вызова onDownloadProgress мы вычисляем процент и обновляем представление с его помощью. Вы могли заметить, что я избавился от оператора if. (if (progress % 5 === 0) Это необходимо для того, чтобы индикатор выполнения всегда обновлялся при каждом обратном вызове.
Чтобы еще больше замедлить работу, я также включил регулирование на панели «Сеть». Таким образом можно моделировать недорогие устройства. Также для более быстрого подключения вы можете увидеть, что индикатор выполнения мгновенно переходит на 100%. Таким образом, мы сможем убедиться, что мы действительно видим его прогресс. Пришло время проверить это!
Резюме
Axios имеет приятный и простой в использовании API. Вы можете настроить индикаторы загрузки за минуту, чтобы пользователи получали отзывы о трудоемких задачах и ходе выполнения ваших сетевых запросов.
Если вы хотите получить полный исходный код как есть, вы можете клонировать проект из этого репозитория GitHub. Спасибо, что нашли время прочитать эту статью, удачного кодирования!
