向 Axios 请求。如何解决异步问题？

Question

我的 Nuxt.js 项目中有这个 _id.vue 页面：

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

我的任务是在动态页面 (_id) 上出现第 404 个错误时进行重定向。如果我通过 nuxt-link (s) 到类似页面，整个实现工作正常 - 如果我在地址栏中输入错误的 URL，第 404 个错误工作正常。但是如果我已经在工作页面上，就会出现问题 - 我重新加载它。我没有再次加载同一页面，而是收到第 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);


    }

};

Answer 1

我很确定，如果您开始使用 catch() 和 axios，就像每个人都应该做的那样，您将能够很好地处理所有非 200 响应。这意味着 404、40x、50x 等...

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