Блог

Главная - Вопросы по программированию - Поймайте ошибку Axios в Vuex, чтобы отобразить страницу 404

Поймайте ошибку Axios в Vuex, чтобы отобразить страницу 404

#javascript #vue.js #axios #vuex #vue-router

Вопрос:

Я создаю приложение, используя платформу Django Rest для бэкенда и Vue 3 для интерфейса. Использование Vuex и маршрутизатора Vue в моем проекте, а также Axios для использования API в действиях Vuex. Однако я не мог понять, как отобразить страницу 404 при сбое выборки из бэкенда. Я попробовал пару вещей, таких как импорт маршрутизатора в vuex и обнаружение ошибки, router.push({name: 'notfound'}) но это не сработало. У вас есть какие-либо мысли о том, как этого добиться?

router/index.js

 ...
  {
    path: '/route/:category',
    name: 'filteredterms',
    component: Home
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'notfound',
    component: NotFound
  }

store/index.js

 import router from "../router/index.js"
...
    async exampleFunc({commit}){
      const response = await axios.get(`http://127.0.0.1:8000/api/exampleEndpoint`)
      .then(response => {
        commit('exampleMutation', response.data)
      })
      .catch(error => {
        if (error.response.status == 404){
          router.push({name: 'notfound'})
      }

Ответ №1:

Вы можете использовать interceptor шаблон из axios для достижения этой цели в глобальном масштабе:

 import router from 'path/to/your/router'

axios.interceptors.response.use( 

  //successful callback, we don't need to do anything
  (response) => {
    return response
  }, 

  //check if we received a 404 and redirect
  (error) => {
    if (error.response.status === 404) {
      router.push({name: 'notfound' })
    } else {
      return Promise.reject(error)
    }
  }
)

Комментарии:

1. Спасибо за ответ, но это не сработало… Я утешаю. зарегистрируйте статус, и он регистрирует его (404), но маршрутизатор.push не работает. Он просто меняет URL-адрес на корневой (localhost:8080/), и все. Ничего не отображается и не вводится на страницу.

2. Если он перенаправляется на домашнюю страницу, то, похоже notfound , в этот момент он не зарегистрирован на уровне маршрутизатора.

3. Позвольте мне уточнить, когда я захожу на «localhost:8080/somegibberishnotfound», он показывает мне страницу «не найдено», однако, когда я пытаюсь перейти на «localhost:8080/route/somegibberishnotfound», это происходит из-за того, что в моем файле маршрутизатора зарегистрирован «/route/:категория». Так что это создает проблему.

Метки: ,