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

Posted 2023-03-06

【中文标题】向 Axios 请求。如何解决异步问题？

【英文标题】：Request with Axios. How to solve the async problem?

【发布时间】：2020-02-15 09:03:59

【问题描述】：

我的 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);


    

;

【问题讨论】：

为什么要包含 Vue.js 脚本标签？ Nuxt 应该为您包括在内。此外，如果您没有利用await，那么async fetch 中的async 也没有意义，因为您正在返回一个承诺（它期望它以异步方式运行）。

我应该怎么做 - 你知道如何解决这个问题吗？

>> 为什么要包含 Vue.js 脚本标签？什么意思？

（它在我的项目中没有——它只是显示在“堆栈溢出”编辑器中——因为我看到它没有 nuxt.js 降价。）

【参考方案1】：

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

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

【讨论】：

joxi.ru/RmzB1JxTY1RKym 如果我这样做 - 页面重新加载后我有相同的重定向。