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

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

Мотивация

Когда мы говорим об асинхронных действиях, первое, что приходит в голову, - это API-интерфейсы, которые мы выполняем в нашем веб-приложении. В таком случае мы хотим показать пользователю хороший загрузчик, чтобы он знал, что мы получаем запрошенную информацию. , Теперь вопрос в том, как вы это делаете? не стесняйтесь добавлять это в свои комментарии, а пока я объясню, как я это делаю.

XMLHttpRequest (XHR) объекты используются для взаимодействия с серверами. Вы можете получать данные из URL-адреса без необходимости полного обновления страницы. Это позволяет веб-странице обновлять только часть страницы, не нарушая того, что делает пользователь. XMLHttpRequest широко используется в AJAX программировании. Https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

Идея состоит в том, чтобы перехватить все запросы XHR в веб-приложении и запустить загрузчик, но таким образом, чтобы мы не запускали загрузчик несколько раз. Мы будем знать, работает ли загрузчик уже или нет.

Существует два подхода, и это зависит от дизайна вашего веб-приложения, например, если вы разработали свое веб-приложение для выполнения API-интерфейсов из одного места или если у вас есть существующее приложение и вы хотите интегрировать общий механизм с перехватом XHR .

Основы

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

Мы хотим, чтобы Spinner был в нашем корневом компоненте, он будет вести себя как контейнер React с несколькими сопоставленными ему реквизитами. Таким образом, мы можем отправлять действия из любого места в приложении для изменения состояния Spinner, например showSpinner, hideSpinner и т. д.

По замыслу, мы хотим перехватить все запросы, и следующим шагом будет определение конфигурации для него. Конфигурация будет содержать список API-интерфейсов, которые мы хотим игнорировать (это может быть запрос, который нам не нужен. взаимодействие с пользователем, фоновая активность), потому что не все время мы хотим показывать счетчик.

Состояние прядильщика

Каждый раз, когда появляется запрос XHR, мы будем поддерживать счетчик для счетчика в нашем магазине Redux. Мы определим список pendingTasks в магазине, и с помощью этого списка мы будем управлять видимостью счетчика.

Счетчик будет управляться двумя действиями, XHR_TASK_BEGIN и XHR_TASK_END, эти действия будут отправлены из перехватчика XHR, давайте посмотрим.

Триггеры

Вот где вызываются эти методы

Перед вызовом API мы вызовем startSpinner, а после завершения запроса вызовем функцию endSpinner.

Изображение стоит 1000 слов, так сколько же стоит видео? Давай отладим это.

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

Для тех, кто уже имеет существующее веб-приложение и хочет интегрировать тот же подход без какого-либо отношения к веб-приложению на основе React-Redux, вы всегда можете (как я сказал в начале) перехватывать запросы с помощью XHR.

С тем же подходом, который я использовал в своем веб-приложении React-Redux, вы можете использовать события XHR для имитации изменений хранилища redux с глобальной переменной. В общем, вы подсчитываете активный XHR в сети и таким образом убедитесь, что счетчик будет обрабатываться автоматически.

Заключение

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

Кто я?

Я Офир Аттиа, веб-разработчик, специализирующийся на дизайне и архитектуре. В настоящее время работает в Amdocs архитектором программного обеспечения.

Содействие

Особая благодарность моему коллеге Рафаэлю Окнину, Рафаэлю и мне вместе разрабатываем библиотеки с открытым исходным кодом в течение последних 2 лет.

функция Global Spinner является частью разработанного нами шаблона гармонии.

Хотите узнать больше о Harmony? прочтите следующую статью.