Как я могу добавить загрузчик до завершения запроса API в Vue SPA? - PullRequest
Новая
       33

Как я могу добавить загрузчик до завершения запроса API в Vue SPA?

0 голосов
/ 10 апреля 2020

Я создал vue SPA, и когда я go перехожу на новый маршрут, страница загрузится до того, как мой запрос к серверу будет завершен, что означает, что перед тем, как данные отобразятся, будет задержка 0,5 с или около того. Я хотел бы добавить загрузчик, такой как NProgress, который открывается на странице только после того, как запрос завершен, и все загружается, делая так, что данные будут отображаться мгновенно, вместо того, чтобы мои элементы были пустыми, а затем данные появлялись после задержки.

Как бы я это сделал?

Спасибо

1 Ответ

1 голос
/ 10 апреля 2020

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

Я вижу, что вы упомянули топор ios. Маловероятно, но если вы не делаете больше вызовов API после начальной загрузки страницы, вы можете создать перехватчики в вашем экземпляре ax ios, которые устанавливают часть состояния vuex как true, когда запрос начинается, и false, когда он заканчивается. Затем вы можете просто условно отобразить ваш индикатор выполнения в приложении. vue, если он равен true, и ваш вид маршрутизатора, если он равен false. 

import axios from 'axios'
import store from '@/store'

const api = axios.create({
  baseURL: 'URL',
})

api.interceptors.request.use(config => {
    store.commit('changeLoadingStatus', true)
    return config
  }, error => {
    // Handle errors
})

api.interceptors.response.use(response => {
    store.commit('changeLoadingStatus', false)
    return response
  }, error => {
    // Handle errors
})

export default api
...