为项目增加错误提示页面,比如后端接口没有数据或接口报错的时候,如果不增加错误提示页面的话,那接口报错的信息就会在页面中显示,这显然不利于用户体验。
实际操作过程中,可能因为各种原因无法显示正确的返回页面,比如本身这篇文章的id不存在,或者网络请求问题,这时候就需要一个错误展示页用来提示用户;
nuxt.js官方也有错误提示页面的写法:传送门-> 官方错误提示页面的写法
此项目中的错误提示页面是放在layouts目录中:
layouts中的error.vue页面内容为:
<template>
<div class="err_wrap">
<h1 class="error" v-if="error.statusCode === 404">页面不存在或没有数据</h1>
<h1 class="error" v-else>应用发生错误异常</h1>
<nuxt-link class="to_home" to="/">返回首页</nuxt-link>
</div>
</template>
<script>
export default {
props: ['error'],
layout: 'detail',
data() {
return {
msg: '未找到相应页面或没有数据'
}
}
}
</script>
<style scoped>
.err_wrap {
padding: 0.2rem 0.4rem;
text-align: center;
}
.error {
font-size: 0.32rem;
text-align: center;
padding-top: 55%;
color: #582c1a;
padding-bottom: 0.4rem;
}
.to_home {
font-size: 0.3rem;
color: #582c1a;
display: inline-block;
padding-bottom: 3.9rem;
}
</style>
在页面组件中是在asyncData的catch中写的,当接口调用出错或无数据时就会跳转到错误提示页面:
async asyncData(context, callback) {
try {
// console.log("_id的id:====", context.params.id)
let paramsWorksList = {
id: context.params.id
}
let WorksDetail = await context.$axios.post(`/anchor/worksList`, paramsWorksList)
// console.log("WorksDetail:=====", WorksDetail.data.data[0])
return {
WorksDetail: WorksDetail.data.data[0]
}
} catch (err) {
console.log("errConsole========:", err)
callback({ statusCode: 404, message: '页面未找到或没有数据!' }) //当接口无数据或接口出错时会执行这句代码跳转到错误提示页面
}
},
这里有一个坑,asyncData的callback在nuxt.js的2.3.X版本给废弃了,运行项目总是提示:
Callback-based asyncData, fetch or middleware calls are deprecated. Please switch to promises or async/await syntax
经过google发现的,nuxt.js的作者觉得callback没什么用,给去掉了。github issue链接:https://github.com/nuxt/nuxt.js/issues/4158
所以经过查看文档,error的属性在context这个参数中,页面组件中的代码如下:
async asyncData(context) {
try {
// console.log("_id的id:====", context.params.id)
let paramsWorksList = {
id: context.params.id
}
let WorksDetail = await context.$axios.post(`/anchor/worksList`, paramsWorksList)
// console.log("WorksDetail:=====", WorksDetail.data.data[0])
return {
WorksDetail: WorksDetail.data.data[0]
}
} catch (error) {
console.log("errConsole========:", context.error({ statusCode: 404, message: '页面未找到或无数据' }))
context.error({ statusCode: 404, message: '页面未找到或无数据' }) //修改成这样就可以跳到错误提示页面
}
},
在
asyncData
请求时添加参数callback
,如果请求正确,则callback
的第一个参数为null
,第二个参数为赋值对象;
如果请求错误,则直接将对象为参数,包括
statusCode
错误代码以及message
错误信息,以便处理不同的错误信息展示;
最终效果如下:
参考链接:
https://juejin.im/post/5b8e30f7e51d4538c6315511
https://zh.nuxtjs.org/guide/views/#%E5%B8%83%E5%B1%80