重新取得資料時遇到500（RuntimeError）錯誤：axios和nuxtjs的問題解決方案

Question

<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 class="brush:php;toolbar:false;"><腳本> /* eslint 停用 */ 從 'axios' 導入 axios 導出預設值{ 數據（） { 返回 { 專案: {} } }, 異步 asyncData({params}){ 返回等待 axios.get('https://my-api.wp/wp-json/wp/v2/project/' params.id) .then((res) => { 返回 { 項目：res.data } }).catch(函數（錯誤）{ if (錯誤.回應) { // 發出請求並伺服器回應 console.log(錯誤.回應.資料); console.log(錯誤.回應.狀態); console.log(error.response.headers); } else if (error.request) { // 發出了請求但沒有收到回應 console.log(錯誤.請求); } 別的 { // 設定請求時發生了一些事情，觸發了錯誤 console.log('錯誤', error.message); } }); } } </劇本></pre> <p>以及一個專案的連結：</p>

; <p>目標在 nuxt.config.js 中是靜態的。</p> <h1><strong>編</strong></h1> <p>經過研究，我發現在nuxt-link的params物件中傳遞的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`)
            返回{項目}
        } 捕獲（錯誤）{
…
}</pre></p>

Answer 1

asyncData在重新整理頁面或直接輸入網址時不會重新觸發。
如果您想在這些事件發生時取得數據，可以使用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>