Beim erneuten Abrufen von Daten ist ein Fehler vom Typ 500 (RuntimeError) aufgetreten: Problemlösung für Axios und Nuxtjs
P粉327903045
2023-08-25 11:06:29
<p>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 <em>url</em> </p>
<pre class="brush:php;toolbar:false;"><template>
<div class="single-project">
<Kopfzeile />
<h1>{{project.title.rendered}}</h1>
<article v-html="project.content.rendered"></article>
<ClickToAction />
</div></pre>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>以及一个项目的链接:</p>
<pre class="brush:php;toolbar:false;"><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}}"></pre>
<p>
<h1><strong>编辑</strong></h1>
<p>取id的值.为了解决这个问题,我通过API使用slug获取了项目,并显示了所有属性(例如标题、内容等)</p>
<pre class="brush:php;toolbar:false;">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) {
...
}</pre></p>
asyncData
在刷新页面或直接输入URL时不会重新触发。如果您想在这些事件发生时获取数据,可以使用
fetch()
钩子或中间件。编辑后的答案
在继续之前,请确保您已安装
@nuxtjs/axios
: https://axios.nuxtjs.org/setup