Запрос с Axios. Как решить асинхронную проблему? - PullRequest
Новая
       33

Запрос с Axios. Как решить асинхронную проблему?

0 голосов
/ 18 октября 2019

У меня есть страница _id.vue в моем проекте Nuxt.js: 

<template>

  <div class="wrapper">

    <HeaderApp>

      <DivHeaderMenu>
      </DivHeaderMenu>

    </HeaderApp>

    <CenterContentDinamicFirmenistorieApp>
    </CenterContentDinamicFirmenistorieApp>

    <FooterApp>
    </FooterApp>

  </div>

</template>

<script>
  //company_history
  import axios from 'axios';
  import HeaderApp from '~/components/HeaderApp';
  import FooterApp from '~/components/FooterApp';
  import CenterContentDinamicFirmenistorieApp from '~/components/CenterContentDinamicFirmenistorieApp'
  import DivHeaderMenu from '~/components/DivHeaderMenu';
  import Pixelperfect from '~/components/Pixelperfect';

  export default{

  async fetch ({ store, params, redirect, app}) {
    return axios.get('http://seo-gmbh.eu/json/api_sunds.php?action=get_pages&url=company_history')
    .then((res) => {
      store.commit('company_history/init_data_for_firmenistorie', res.data);
    })
  },


  async validate({store, params, redirect}) {

    const urlData = store.state.company_history.dbFirmenstorie.dbFirmenistorieSortArrayData;
    let resultArray = false;

    for (let i = 0; i < urlData.length; i++) {
      if(params.id === urlData[i].toString()){
        return resultArray = urlData[i];
      }
    }

    if(resultArray == false){
        return redirect('/Firmenistorie');
    }
},


  head () {
    return {
      title: this.$store.state.company_history.dbFirmenstorie.dbFirmenistorieData.data.meta.title,
      meta: [
        {description: this.$store.state.company_history.dbFirmenstorie.dbFirmenistorieData.data.meta.description}
      ]
    }
  },

  components:{
    HeaderApp,
    FooterApp,
    CenterContentDinamicFirmenistorieApp,
    DivHeaderMenu,
    Pixelperfect
  },


}

</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Моя задача - получить перенаправление, когда я получаю 404-ю ошибку на динамической странице (_id). Вся реализация работает нормально, если я перехожу через nuxt-link (s) на похожие страницы - 404-я ошибка работает нормально, если я ввожу неверный URL в адресную строку. Но проблема появляется, если я уже на рабочей странице - я перезагружаю ее. Вместо того, чтобы снова загрузить ту же страницу, я получаю 404-ю ошибку и в результате перенаправляю. Это происходит потому, что в данном конкретном случае я не получаю данные из хранилища

У меня вопрос: как решить эту (как я понимаю, асинхронную) проблему? (Я перепробовал все, что возможно - ничего не помогает).

Мой репозиторий Vuex выглядит довольно громоздким - но на всякий случай я добавлю его код для лучшего понимания проблемы: 

export const state = () => ({
  dbFirmenstorie: {
    dbFirmenistorieData: null,
    dbFirmenistorieMaxYearData:  null,
    dbFirmenistorieMaxDetailsData:  null,
    dbFirmenistorieSortArrayData:  [],
  },
});

export const mutations = {

  init_data_for_firmenistorie (state, uploadDbFirmenistorieData) {

    state.dbFirmenstorie.dbFirmenistorieData = uploadDbFirmenistorieData;
    state.dbFirmenstorie.dbFirmenistorieData.data.content_json = JSON.parse(state.dbFirmenstorie.dbFirmenistorieData.data.content_json);
    state.dbFirmenstorie.dbFirmenistorieData.data.meta = JSON.parse(state.dbFirmenstorie.dbFirmenistorieData.data.meta);

      for (let i = 0; i < state.dbFirmenstorie.dbFirmenistorieData.data.company_history_data.length; i++) {

        if(state.dbFirmenstorie.dbFirmenistorieSortArrayData.indexOf( Number( state.dbFirmenstorie.dbFirmenistorieData.data.company_history_data[i].company_history_from_year )) == -1 ){
          state.dbFirmenstorie.dbFirmenistorieSortArrayData.push(Number(state.dbFirmenstorie.dbFirmenistorieData.data.company_history_data[i].company_history_from_year));
        }

        if(state.dbFirmenstorie.dbFirmenistorieMaxYearData < Number(state.dbFirmenstorie.dbFirmenistorieData.data.company_history_data[i].company_history_from_year)){
          state.dbFirmenstorie.dbFirmenistorieMaxYearData = Number(state.dbFirmenstorie.dbFirmenistorieData.data.company_history_data[i].company_history_from_year);
          state.dbFirmenstorie.dbFirmenistorieMaxYearData = Number(state.dbFirmenstorie.dbFirmenistorieData.data.company_history_data[i].company_history_from_year);
          state.dbFirmenstorie.dbFirmenistorieMaxDetailsData = state.dbFirmenstorie.dbFirmenistorieData.data.company_history_data[i];
        }
      }

      function sortNumber(a, b) {
        return b - a;
      }

      state.dbFirmenstorie.dbFirmenistorieSortArrayData.sort(sortNumber);


    }

};

1 Ответ

0 голосов
/ 18 октября 2019

Я почти уверен, что если вы начнете использовать catch() с axios, как это всегда должно делать каждый, вы сможете нормально обрабатывать все ответы, кроме 200. Что означает 404, 40x, 50x и т. Д ... 

axios
.get("https://example.com")
.then(res => console.log(res))
.catch(e => console.log(e))
...