Request with Axios. How to solve the async problem?

Question

I have this _id.vue page on my Nuxt.js project:

 <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>

My task is to get a redirect when I get the 404th error on the dynamic page (_id). The whole implementation works fine if I go through nuxt-link (s) to similar pages - the 404th error works fine if I enter an incorrect URL in the address bar. But the problem appears if I'm already on a working page - I reload it. Instead of loading the same page again, I get the 404th error and redirect as a result. This happens because in this particular case I do not receive data from the store

My question is: How can I solve this (asynchronous, as I understand it) problem? (I tried everything that is possible - nothing helps).

My Vuex repository looks rather piled up - but just in case, I'll throw its code for a better understanding of the problem:

 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); } };

Answer 1

I am pretty sure that if you start using catch() with axios as everyone should always do, you will be able to handle all non 200 responses just fine. Which means 404, 40x, 50x, etc...

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