데이터를 다시 가져오는 동안 500(RuntimeError) 오류가 발생했습니다: axios 및 nuxtjs에 대한 문제 해결 방법

Question

저는 WordPress를 API로 사용하고 Nuxt.js를 JavaScript 프레임워크로 사용하여 블로그 기반 페이지를 구축했습니다. 내 _slug.vue 파일에서 문제가 발생합니다. 개별 블로그(프로젝트) 페이지로 이동하면 개별 블로그 게시물이 제대로 렌더링됩니다. 그러나 단일 블로그 게시물 페이지를 다시 로드하거나 URL만 입력하면 콘솔에 GET url 오류가 표시됩니다.

<템플릿>
<div class="단일 프로젝트">
    <헤더 />
    <h1>{{project.title.rendered}}</h1>
    <article v-html="project.content.rendered"></article>
    <ClickToAction />
</div>

<script>
/* eslint 비활성화 */
'axios'에서 axios 가져오기
기본값 내보내기{
    데이터() {
        반품 {
            프로젝트: {}
        }
    },
    비동기 asyncData({params}){

            반환 대기 axios.get('https://my-api.wp/wp-json/wp/v2/project/' + params.id)
                .then((res) => {
                    반품 {
                        프로젝트: res.data
                    }
                }).catch(함수 (오류) {
                    if (error.response) {
                    // 요청이 이루어지고 서버가 응답함
                    console.log(error.response.data);
                    console.log(error.response.status);
                    console.log(error.response.headers);
                    } else if (error.request) {
                    // 요청했지만 응답이 수신되지 않았습니다.
                    console.log(error.request);
                    } 또 다른 {
                    // 오류를 발생시킨 요청을 설정하는 중에 문제가 발생했습니다.
                    console.log('오류', error.message);
                    }
                });
    }
}

<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="프로젝트의 프로젝트"  :key="project.id" :to="{이름: 'projekte-slug', params: { slug: project.slug, id: project.id}}">

目标는nuxt.config.js中是静态的입니다.

编辑

经过研究，저희는 nuxt-link의 매개변수에 있는 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`)을 기다립니다.
            { 프로젝트 } 반환
        } 잡기(오류) {
...
}

Answer 1

asyncData페이지를 새로 고치거나 URL을 직접 입력하면 다시 트리거되지 않습니다.
이러한 이벤트가 발생할 때 데이터를 얻으려면 fetch()hooks 또는 middleware를 사용할 수 있습니다.

---

수정된 답변

계속하기 전에 @nuxtjs/axios를 설치했는지 확인하세요. https://axios.nuxtjs.org/setup

으아악