Vue JS динамические компоненты в маршрутах.Обработка загрузки и ошибок

Question

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

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

Answer 1

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

Обычно, когда мы лениво загружаем наши виды маршрутизатора с помощью Webpack, мы делаем:

export default [
  {
    path: '/',
    name: 'home',
    component: () => import('@views/home'),
    //               ^^^^^^^^^^^^^^^^^^^^^
    //               The `import` function returns a Promise with our component definition.
  },
] // RouteConfig[]

Но что происходит, когда нам нужно обрабатывать загрузкуstate ?

Поскольку Vue 2.3.0 и Vue Router 2.4.0, фабрика асинхронных компонентов также может вернуть объект:

export default [
  {
    path: '/',
    name: 'home',
    component: () => ({
      // The component to load (should be a Promise)
      component: import('./MyComponent.vue'),
      // A component to use while the async component is loading
      loading: LoadingComponent,
      // A component to use if the load fails
      error: ErrorComponent,
      // Delay before showing the loading component. Default: 200ms.
      delay: 200,
      // The error component will be displayed if a timeout is
      // provided and exceeded. Default: Infinity.
      timeout: 3000
    })
  },
] // RouteConfig[]

---

Возможно, вы захотите использовать повторноодинаковые компоненты загрузки и ошибки для разных представлений, а также некоторые значения по умолчанию для задержки и тайм-аута.Если это так, вы можете использовать стратегию, описанную в этом шаблоне vue enterprise , созданном Крисом Фрицем , членом основной группы Vue.

// Lazy-loads view components, but with better UX. A loading view
// will be used if the component takes a while to load, falling
// back to a timeout view in case the page fails to load. You can
// use this component to lazy-load a route with:
//
// component: () => lazyLoadView(import('@views/my-view'))
//
// NOTE: Components loaded with this strategy DO NOT have access
// to in-component guards, such as beforeRouteEnter,
// beforeRouteUpdate, and beforeRouteLeave. You must either use
// route-level guards instead or lazy-load the component directly:
//
// component: () => import('@views/my-view')
//
function lazyLoadView(AsyncView) {
  const AsyncHandler = () => ({
    component: AsyncView,
    // A component to use while the component is loading.
    loading: require('@views/_loading').default,
    // Delay before showing the loading component.
    // Default: 200 (milliseconds).
    delay: 400,
    // A fallback component in case the timeout is exceeded
    // when loading the component.
    error: require('@views/_timeout').default,
    // Time before giving up trying to load the component.
    // Default: Infinity (milliseconds).
    timeout: 10000,
  })

  return Promise.resolve({
    functional: true,
    render(h, { data, children }) {
      // Transparently pass any props or children
      // to the view component.
      return h(AsyncHandler, data, children)
    },
  })
}

Ииспользуйте это так:

export default [
  {
    path: '/',
    name: 'home',
    component: () => lazyLoadView(import('@views/home')),
  },
] // RouteConfig[]

Answer 2

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

Вот пример, который перенаправляет на вход в систему, если код ошибки возврата ответа 401 (не авторизован). Следует упомянуть, что у вас могут быть перехватчики для ответов и запросов.

Документация: https://github.com/axios/axios

axios.interceptors.response.use(response => {
    return response;
}, error => {
    if (error.response.status === 401) {
        router.push('/logout');
    }

    return error;
});