Выборка данных

Data Fetching

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

Мы можем добиться этого двумя различными способами:
  • Выборка после навигации: сначала выполните навигацию и извлеките данные в перехватчике жизненного цикла входящего компонента. Отобразите состояние загрузки во время выборки данных
  • Выборка перед навигацией: Извлеките данные перед навигацией в route enter guard и выполните навигацию после того, как данные были извлечены

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

Выборка после навигации

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

Давайте предположим, что у нас есть компонент Post, который должен извлекать данные для публикации на основе $route.params.id

Выборка перед навигацией

При таком подходе мы извлекаем данные перед фактическим переходом к новому маршруту. Мы можем выполнить выборку данных в режиме защиты перед вводом маршрута во входящем компоненте и вызвать next только после завершения выборки.

Обратный вызов, переданный в next, будет вызван после того, как компонент будет смонтирован:

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