使用axios在Nuxt.js中重取数据出现Error 500 (RuntimeError)如何解决？

问题根因 #

• 你配置的Nuxt路由是/projekte/:slug格式，只有slug是URL自带的永久参数，通过nuxt-link传递的id属于前端路由临时内存参数，页面刷新后会直接丢失，导致请求API时拼接的地址是https://my-api.wp/wp-json/wp/v2/project/undefined，触发500错误。
• 跳转时正常是因为前端路由切换没有刷新页面，临时传递的id还保留在内存中，可正常读取。

修复方案 #

你调研得出的用slug查询API的方案是最优解，同时需要补充两个适配细节：

1. 适配WordPress API的返回格式 #

WordPress REST API 按slug查询文章时，返回的是数组格式（即使只有一个匹配结果），需要取数组第一个元素作为最终的project数据，同时要添加404异常处理逻辑。
修正后的asyncData代码：

async asyncData({ params, $axios, error }) {
  try {
    const projectRes = await $axios.$get(`https://my-api.wp/wp-json/wp/v2/project?slug=${params.slug}&_embed`)
    // 无匹配结果时抛出404
    if (projectRes.length === 0) {
      return error({ statusCode: 404, message: '当前项目不存在' })
    }
    return { project: projectRes[0] }
  } catch (error) {
    // 请求失败处理
    return error({ statusCode: 500, message: '项目数据获取失败' })
  }
}

2. 模板添加空值判断 #

避免数据未加载完成、或请求失败时，模板读取属性报错，修改模板如下：

<template> 
<div class="single-project">
    <Header />
    <h1 v-if="project">{{ project?.title?.rendered }}</h1>
    <article v-if="project" v-html="project?.content?.rendered"></article>
    <ClickToAction />
</div>
</template>

替代方案（可选） #

如果你不想修改API请求逻辑，也可以调整路由规则，把id放到URL中永久保留，比如将路由命名为projekte/:id-:slug，这样刷新时id也不会丢失，请求逻辑可以保持不变。

内容的提问来源于stack exchange，提问作者nip