Nuxt3服务端渲染时调用的接口报500时如何显示error.vue

跟着官网走

首先看官网案例

xml 复制代码
<script setup lang="ts">
  const route = useRoute()
  const { data, error } = await useFetch(`/api/movies/${route.params.slug}`)
  if (!data.value) {
    throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
  }
</script>

思路就是将setup中的代码通过await同步执行,请求完接口后对dataerror进行判断,然后就能按条件显示error.vue页面。其中,官方也更推荐用showError代替throw createError。但是这样的写的问题是:1、没有对接口调用进行封装;2、对接口的错误处理也没有封装。

努力调试

通常,我希望通过api.getUserInfo(data)这样的方式调用接口,封装方法看我另一篇文章。封装后,对于SSR时接口调用失败的处理,应该统一封装在$fetchonResponseError中,如:

javascript 复制代码
function fetchWrapper(url, opts) {
  return $fetch(url, {
    ...opts,
    onResponseError({ request, options, response }) {
      if (import.meta.server) {
        showError({ statusCode: 404, statusMessage: 'Page Not Found' })
      }
    },
  }).catch(() => {});
}

但尝试后发现,showError没有生效。进一步测试未做$fetch封装的几种情况:

xml 复制代码
<script setup>
const { data } = await useAsyncData(async () => {
  // 能生效
  showError({ statusCode: 404, statusMessage: 'Page Not Found' })
  
  const res = await $fetch(url, {
    onRequestError({ request, options, error }) {
      if (import.meta.server) {
        // onRequestError中能生效
        showError({ statusCode: 404, statusMessage: 'Page Not Found' })
      }
    },
    onResponseError({ request, options, response }) {
      if (import.meta.server) {
        // onResponseError中不生效
        showError({ statusCode: 404, statusMessage: 'Page Not Found' })
      }
    },
  })

  // 不生效
  showError({ statusCode: 404, statusMessage: 'Page Not Found' })
})
</script>

所以,不是封装导致的问题。总结一下,应该是请求前能生效,请求后及其回调都不生效。

大胆实践

个人猜测,这可能是Nuxt的一个小bug。我实践了一个可行的解决办法,就是建一个全局状态serverRequestError,在接口回调中更新此状态,在组件的setup的末尾判断一下此状态是否有值,有的话showError

stores/serverRequestError.js的代码如下:

javascript 复制代码
export const useServerRequestError = defineStore('serverRequestError', () => {
  const code = ref(-1)
  const reason = ref('')

  function create({ url, statusCode, statusMessage }) {
    code.value = statusCode
    reason.value = `${url} ${statusCode} ${statusMessage}`
  }

  function clear() {
    code.value = -1
    reason.value = ''
  }

  return {
    reason,
    create,
    clear,
  }
})

// 创建error信息
export function createServerRequestError(opts) {
  useServerRequestError().create(opts)}

// 检查是否有error
export function checkServerRequestError() {
  if (import.meta.server) {
    const store = useServerRequestError()

    store.reason && showError({
      statusCode: store.code || 404,
      statusMessage: store.reason,
    })
  }
}

// 清除error
export function clearServerRequestError() {
  useServerRequestError().clear()}

onResponseError中调用createServerRequestError()

vbscript 复制代码
$fetch(url, {
  onResponseError({ request, options, response }) {
    const { status, statusText } = response;

    if (import.meta.server){
      useServerRequestError().create({ url: request, statusCode: status, statusMessage: statusText })    }
  }
})

在需要检查的业务代码的末尾调用checkServerRequestError()

xml 复制代码
<script setup>
const { data } = await useAsyncData(async () => {
  const res = await apis.get404()
  return res
})

checkServerRequestError()
</script>

error.vue也别忘了调用clearServerRequestError()清除error信息:

思考优化

感觉这个自定义的全局状态与Nuxt提供的useError有点像,可惜尝试了很多办法,还是不知道useError怎么用进去。

还可以优化的点,就是Nuxt提供一个在SSR时的setup执行的结尾可执行的钩子来执行checkServerRequestError(),遗憾的是我还没发现可用的钩子。

还可以考虑在layout组件判断状态、或封装状态组件的方式来触发showError,但是都还不够优雅,如果有更好的方案,请评论区留言哦~

相关推荐
小小小小宇15 分钟前
前端国际化看这一篇就够了
前端
大G哥19 分钟前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext20 分钟前
html初识
前端·html
小小小小宇32 分钟前
一个功能相对完善的前端 Emoji
前端
m0_6278275233 分钟前
vue中 vue.config.js反向代理
前端
Java&Develop35 分钟前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器
白泽talk38 分钟前
2个小时1w字| React & Golang 全栈微服务实战
前端·后端·微服务
摆烂工程师1 小时前
全网最详细的5分钟快速申请一个国际 “edu教育邮箱” 的保姆级教程!
前端·后端·程序员
HhhDreamof_1 小时前
云贝餐饮 最新 V3 独立连锁版 全开源 多端源码 VUE 可二开
前端·vue.js·开源
Simaoya1 小时前
【vue】【element-plus】 el-date-picker使用cell-class-name进行标记,type=year不生效解决方法
前端·javascript·vue.js