vue根据http响应状态渲染显示404、500界面

最新推荐文章于 2023-08-09 17:42:18 发布

BUG小太阳

最新推荐文章于 2023-08-09 17:42:18 发布

阅读量1.3k

点赞数 1

分类专栏：功能文章标签：前端

本文链接：https://blog.csdn.net/ceshixiao/article/details/118000320

版权

功能专栏收录该内容

14 篇文章 0 订阅

订阅专栏

需求：响应错误时，渲染显示出有错误信息的界面
准备：在compontent中创建错误信息界面400.vue、500.vue
注意：注意查看错误界面需要放在路由的哪一级别（我是children下）

一、创建路由（routes/index.js）

	export default {
    mode: 'history',
    routes: [
        // 动态路径参数 以冒号开头
        {
            name:'index',
            path: '/',
            component: () => import('@/components/QBLayout/index.vue'),
            children: [
            	{
	                name:'index',
	                path: '/',
	                component: () => import('@/components/Index/index.vue'),
           	 	},
            	{
                    name: 'error_403',
                    path: '403',
                    component:()=>import('@/components/errorStatus/403.vue')
                },
                {
                    name: 'error_500',
                    path: '500',
                    component:()=>import('@/components/errorStatus/500.vue')
                },
                {
                    name: 'error_404',//注意这个404路由要放在最后面
                    path: '*',
                    component:()=>import('@/components/errorStatus/404.vue')
                }
            ]
        }
    ]
}

二、响应拦截(util/http.js)

import Axios from 'axios'

//1、封装方法：针对异常响应码分别处理
const codeErrorHandle = (resData)=>{
    switch (resData.code) {
        case 404:
            router.push({
                name:'error_404'
              })
            break;
        case 500:
            router.push({
                name:'error_500'
              })
            break;
        default:
}
//2、axios拦截
const instance = Axios.create({ timeout: 25000 });

//3、响应拦截：主要针对响应处理如下
instance.interceptors.response.use(
    res => {
        if (res.status && +res.status < 300 && res.data && +res.data.code === 1) 
            return Promise.resolve(res.data.data);
        } else {//调用codeErrorHandle处理异常响应码
            codeErrorHandle(res.data);
            return Promise.reject(res);
        }
    },
    error => {//这是其他响应状态判断，不是这个主题，所以在这里暂时省略一下}
);