Beim erneuten Abrufen von Daten ist ein Fehler vom Typ 500 (RuntimeError) aufgetreten: Problemlösung für Axios und Nuxtjs

Question

Ich habe eine Blog-basierte Seite mit WordPress als API und Nuxt.js als JavaScript-Framework erstellt. Das Problem tritt in meiner Datei _slug.vue auf. Wenn ich zu einer einzelnen Blog-(Projekt-)Seite navigiere, werden die einzelnen Blog-Beiträge einwandfrei gerendert. Wenn ich jedoch eine einzelne Blog-Beitragsseite neu lade oder einfach nur die URL eingebe, zeigt die Konsole den Fehler an: GET url

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

<script>
/* eslint-disable */
Axios aus 'Axios' importieren
Standard exportieren{
    Daten() {
        zurückkehren {
            Projekt: {}
        }
    },
    async asyncData({params}){

            return wait axios.get('https://my-api.wp/wp-json/wp/v2/project/' + params.id)
                .then((res) => {
                    zurückkehren {
                        Projekt: res.data
                    }
                }).catch(function (error) {
                    if (error.response) {
                    // Anfrage gestellt und Server geantwortet
                    console.log(error.response.data);
                    console.log(error.response.status);
                    console.log(error.response.headers);
                    } else if (error.request) {
                    // Die Anfrage wurde gestellt, aber es wurde keine Antwort erhalten
                    console.log(error.request);
                    } anders {
                    // Beim Einrichten der Anfrage ist etwas passiert, das einen Fehler ausgelöst hat
                    console.log('Error', error.message);
                    }
                });
    }
}
</script>

以及一个项目的链接:

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

编辑

取id的值.为了解决这个问题,我通过API使用slug获取了项目，并显示了所有属性（例如标题、内容等）

async asyncData({ params, $axios }) {
        versuchen {
            console.log(params.slug);
            const project = waiting $axios.$get(`https://my-api.wp/wp-json/wp/v2/project?slug=${params.slug}&_embed`)
            return { Projekt }
        } Catch (Fehler) {
...
}

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>