捕捉Vuex中的Axios错误以显示404页
捕捉Vuex中的Axios错误以显示404页
提问于 2021-03-23 06:35:47
我正在构建一个应用程序，使用Django Rest框架作为后端，Vue 3用于前端。在我的项目中使用Vuex和Vue路由器，还可以使用Axios在Vuex操作中使用API。但是，当从后端获取失败时，我想不出如何显示404页。我尝试了几种方法，比如将路由器导入vuex并使用router.push({name: 'notfound'})捕获错误，但没有奏效。你对如何做到这一点有什么想法吗？
router/index.js
...
{
path: '/route/:category',
name: 'filteredterms',
component: Home
},
{
path: '/:pathMatch(.*)*',
name: 'notfound',
component: NotFound
}store/index.js
import router from "../router/index.js"
...
async exampleFunc({commit}){
const response = await axios.get(`http://127.0.0.1:8000/api/exampleEndpoint`)
.then(response => {
commit('exampleMutation', response.data)
})
.catch(error => {
if (error.response.status == 404){
router.push({name: 'notfound'})
}回答 1
Stack Overflow用户
发布于 2021-03-23 08:19:03
您可以使用axios中的interceptor模式来实现这一全局目标：
import router from 'path/to/your/router'
axios.interceptors.response.use(
//successful callback, we don't need to do anything
(response) => {
return response
},
//check if we received a 404 and redirect
(error) => {
if (error.response.status === 404) {
router.push({name: 'notfound' })
} else {
return Promise.reject(error)
}
}
)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66765313
复制相关文章
相似问题
Axios捕捉承诺错误
Vuex模块CORS中的Nuxtjs Axios错误
Vuex动作-返回Axios返回错误
如何从Vuex操作中的axios函数返回错误消息以调度catch(错误)？
无法捕捉axios react.js中的错误
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
