重新获取数据时遇到500（RuntimeError）错误：axios和nuxtjs的问题解决方案
P粉327903045
2023-08-25 11:06:29
<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>
<pre class="brush:php;toolbar:false;"><script>
/* eslint-disable */
import axios from 'axios'
export default{
data() {
return {
project: {}
}
},
async asyncData({params}){
return await axios.get('https://my-api.wp/wp-json/wp/v2/project/' + params.id)
.then((res) => {
return {
project: res.data
}
}).catch(function (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></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="project in projects" :key="project.id" :to="{name: 'projekte-slug', params: { slug: project.slug, id: project.id}}"></pre>
<p>目标在nuxt.config.js中是静态的。</p>
<h1><strong>编辑</strong></h1>
<p>经过研究，我发现在nuxt-link的params对象中传递的id在重新加载后丢失，因为它需要“父”页面来获取id的值。为了解决这个问题，我通过API使用slug获取了项目，并显示了所有属性（例如标题、内容等）</p>
<pre class="brush:php;toolbar:false;">async asyncData({ params, $axios }) {
try {
console.log(params.slug);
const project = await $axios.$get(`https://my-api.wp/wp-json/wp/v2/project?slug=${params.slug}&_embed`)
return { project }
} catch (error) {
...
}</pre></p>
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>