重新获取数据时遇到500（RuntimeError）错误：axios和nuxtjs的问题解决方案

Question

<p>我使用WordPress作为API和Nuxt.js作为JavaScript框架构建了一个基于博客的页面。 问题出现在我的_slug.vue文件中。当我导航到一个单独的博客（项目）页面时，单个博客文章会正常渲染。但是，如果我重新加载单个博客文章页面，或者只是在URL中输入，控制台会显示错误：GET <em>url</em> 500（RuntimeError）。</p> <pre class="brush:php;toolbar:false;"><template> <div class="single-project"> <Header /> <h1>{{project.title.rendered}}</h1> <article v-html="project.content.rendered"></article> <ClickToAction /> </div></前> <pre class="brush:php;toolbar:false;"><脚本> /* eslint 禁用 */ 从 'axios' 导入 axios 导出默认值{ 数据（） { 返回 { 项目： {} } }, 异步 asyncData({params}){ 返回等待 axios.get('https://my-api.wp/wp-json/wp/v2/project/' + params.id) .then((res) => { 返回 { 项目：res.data } }).catch(函数（错误）{ if (错误.响应) { // 发出请求并服务器响应 console.log(错误.响应.数据); console.log(错误.响应.状态); console.log(error.response.headers); } else if (error.request) { // 发出了请求但没有收到响应 console.log(错误.请求); } 别的 { // 设置请求时发生了一些事情，触发了错误 console.log('错误', error.message); } }); } } </脚本></pre> <p>以及一个项目的链接：</p>

; <p>目标在 nuxt.config.js 中是静态的。</p> <h1><strong>编辑</strong></h1> <p>经过研究，我发现在nuxt-link的params对象中传递的id在重新加载后丢失，因为它需要“父”页面来获取id的值。为了解决这个问题，我通过API使用slug获取了项目，并显示了所有属性（如标题、内容等）

async asyncData({ params, $axios }) {
        尝试 {
            console.log(params.slug);
            const 项目 = 等待 $axios.$get(`https://my-api.wp/wp-json/wp/v2/project?slug=${params.slug}&_embed`)
            返回{项目}
        } 捕获（错误）{
...
}</pre></p>

Answer 1

asyncData在刷新页面或直接输入URL时不会重新触发。
如果您想在这些事件发生时获取数据，可以使用fetch()钩子或中间件。

---

编辑后的答案

在继续之前，请确保您已安装@nuxtjs/axios： https://axios.nuxtjs.org/setup

<script>
export default {
  async asyncData({ params, $axios }) {
    try {
      const project = await $axios.$get(`https://my-api.wp/wp-json/wp/v2/project/${params.id}`)
      return { project }
    } catch (error) {
      if (error.response) {
        // Request made and server responded
        console.log(error.response.data)
        console.log(error.response.status)
        console.log(error.response.headers)
      } else if (error.request) {
        // The request was made but no response was received
        console.log(error.request)
      } else {
        // Something happened in setting up the request that triggered an Error
        console.log('Error', error.message)
      }
    }
  },
}
</script>