javascript - 向 Axios 请求。如何解决异步问题?
问题描述
我的 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);
}
};
解决方案
我很确定,如果您catch()
像每个人都应该做的那样开始使用 axios,您将能够很好地处理所有非 200 响应。这意味着 404、40x、50x 等...
axios
.get("https://example.com")
.then(res => console.log(res))
.catch(e => console.log(e))
推荐阅读
- python - 使用 skorch 和 sklearn 管道的多输出回归由于 dtype 导致运行时错误
- c# - 不要在 asp.net core 3.1 中工作 css 和 js 文件
- c++ - 这个 for 循环的条件(表达式 2)如何工作?
- php - 如何将全文搜索与 MongoDb 中的其他 optinals 匹配结合起来?
- http - grpc-gateway:如何为每个请求设置允许的内容类型
- wpf - 深色主题不适用于 DialogHost 中的组合框
- python - 相机无法在python中检测到多种颜色
- android - 使用 volley 从 json 文件中获取新数据
- c++ - thread.join() 上的 C++ 项目中的奇怪崩溃
- c# - 如何使用 c# 将文件上传到一个驱动器