Menghadapi ralat 500 (RuntimeError) semasa mengambil semula data: penyelesaian masalah untuk axios dan nuxtjs

Question

Saya membina halaman berasaskan blog menggunakan WordPress sebagai API dan Nuxt.js sebagai rangka kerja JavaScript. Masalah berlaku dalam fail _slug.vue saya. Apabila saya menavigasi ke halaman blog (projek) individu, catatan blog individu menjadi baik. Walau bagaimanapun, jika saya memuat semula satu halaman catatan blog, atau hanya memasukkan dalam URL, konsol menunjukkan ralat: GET url

<template>
<kelas div="projek tunggal">
    <Pengepala />
    <h1>{{project.title.rendered}}</h1>
    <artikel v-html="project.content.rendered"></article>
    <ClickToAction />
</div></pra>

<pre class="brush:php;toolbar:false;"><script>
/* eslint-disable */
import axios daripada 'axios'
eksport lalai{
    data() {
        kembali {
            projek: {}
        }
    },
    async asyncData({params}){

            kembali menanti axios.get('https://my-api.wp/wp-json/wp/v2/project/' + params.id)
                .then((res) => {
                    kembali {
                        projek: res.data
                    }
                }).tangkap(fungsi (ralat) {
                    jika (error.response) {
                    // Permintaan dibuat dan pelayan membalas
                    console.log(error.response.data);
                    console.log(error.response.status);
                    console.log(error.response.headers);
                    } else if (error.request) {
                    // Permintaan telah dibuat tetapi tiada jawapan diterima
                    console.log(error.request);
                    } lain {
                    // Sesuatu telah berlaku dalam menyediakan permintaan yang mencetuskan Ralat
                    console.log('Error', error.message);
                    }
                });
    }
}
</script>

以及一个项目的链接：

<nuxt-link :class="'item ' + project._embedded['wp:term'][0].map(el => ; el.name.toLowerCase()).join(' ')" v-for="projek dalam projek"  :key="project.id" :to="{name: 'projekte-slug', params: { slug: project.slug, id: project.id}}">

目标在nuxt.config.js中是静态的。

编辑

经过研究，我发现在nuxt-link的params对象中传递的id在重新加载后丢失，因为它“需象要值。为了解决这个问题，我通过API使用slug获取了项目，并显示了所有属性（例如标题、内容等）

async asyncData({ params, $axios }) {
        cuba {
            console.log(params.slug);
            projek const = menanti $axios.$get(`https://my-api.wp/wp-json/wp/v2/project?slug=${params.slug}&_embed`)
            pulangkan { projek }
        } tangkap (ralat) {
...
}

Answer 1

asyncDataTidak akan dicetuskan semula apabila memuat semula halaman atau memasukkan URL secara terus.
Jika anda ingin mendapatkan data apabila peristiwa ini berlaku, anda boleh menggunakan fetch()cangkuk atau middleware.

---

Jawapan yang diedit

Sebelum meneruskan, sila pastikan anda telah memasang @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>