保 洁 阿 姨

拥有60+年的前端设计经验

60+Years of front-end design experience

luzhou·sichuan

www.usuuu.com

Web网页设计:70888820

2个视频(Video)

首页/破碎代码/Nuxt3请求错误拦截(自定义错误页面)/

Nuxt3请求错误拦截(自定义错误页面)

发布于:2022-11-25 19:24:36/浏览量:385/IP属地:四川省

接收Error

例如:

/**
 * 菜单详情
 */
const { data, error } = await menuShowApi(menuId)

判断error是否有值

/**
 * 服务端时并且error有值就抛出错误
 */
if(process.server && error.value){
    showError('请确认链接是否正确')
}

自定义错误

根目录新建一个error.vue

<template>
    <clientOnly>
        <div class="app-error">
            <p>{{ error.message }}</p>
            <a @click="handleError">返回首页</a>
        </div>
    </clientOnly>
</template>
<script lang="ts" setup>
/**
 * 接收错误信息
 */
const props = defineProps({ 
    error: { 
        type: Object,
        required: true 
    }
})
/**
 * 清除错误信息并返回首页
 */
const handleError = () => {
    clearError({ redirect: '/' })
}
</script>

说明

{{ error.message }}等于showError('请确认链接是否正确')

Nuxt3请求接口封装(精简)-TypeScript

© 未经允许禁止转载
回复
暂无数据

暂无数据

签到奖励积分

站点公告

  • Web网页设计交流群:70888820
  • QQ号为523179414的狗,谢绝访问

版权申明

本站原创内容版权遵循 CC-BY-NC-SA 协议规定,转载请注明出处.本站部分资源收集于网络,只做学习和交流使用,版权归原作者所有.