Как получить информацию о загрузке страницы с сервера

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

Возможно, вы захотите взглянуть на это: jaygould.co.uk/2020-10-24-big-data-pt-2-сокет-прогресс-бар Но мне также интересно услышать мнение других здесь.

Ron Hillel 17.05.2022 09:19

Я думаю, вы имеете в виду приложения SPA, которые не обновляют страницу. Они обычно использовали библиотеки, такие как React или angular, вместе с пользовательской ссылкой на маршрутизатор react-router-dom.

Undo 17.05.2022 09:41
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
2
20
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Таймер (Худшее решение) Вы можете использовать таймер, основанный на среднем времени загрузки. Я не думаю, что должен объяснять, почему это не очень хорошее решение. Но на самом деле это не дает правильного состояния загрузки.

✔️ Опрос Вы можете использовать систему опроса для получения данных. Когда данные еще не готовы, вы возвращаете прогресс. Если данные готовы, вернуть данные. Например:

Step 1: GET the data from the REST-API
        This call returns an id linked to the request. F.e. ID-1

Step 2: You poll each couple of (mili)seconds the status of the request, based on the ID.
        This call returns for example:
          {
              status: 20,
              data: []
          }
        As soon as the status is 100, the data is provided

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

Другие вопросы по теме