:::

14-7-2 整合現有的nuxt套件 plugin

  1. 先安裝一個外部套件
    npm install @nuxtjs/axios

     

  2. 將外部套件加入設定檔nuxt.config.js
    modules: ['@nuxtjs/axios'],

     

  3. 然就可以直接用外部套件了。
    async asyncData({$hello, $axios}) {
      $hello('我在後端被asyncData了')
      const res =await $axios.get('http://blog.lces.tn.edu.tw/api.php?op=index')
      return {res: res.data.data}
    },

     

  4. 若是axios無法取得資料,可以用 try{}.catch(){} 方式來呈現錯誤,但一旦用到axios的地方很多,這樣會顯得麻煩,所以,可以做一個 plugin來處理。
  5. 先建立 plugins/axios.js
    export default function ({ $axios, redirect }) {
      $axios.onError(error => {
        if (error.response.status === 500) {
          console.log('500');
          redirect('/500')
        }
    
        if(error.response.status === 404) {
          console.log('404');
          redirect('/404')
        }
      })
    }
    
  6.  加入設定檔nuxt.config.js
    plugins: ["~/plugins/hello.js", "~/plugins/axios.js"],

     

  7. 如此當api傳回404或500時就會自動導向到 page/404.vue或500.vue(要自己做)
    <script>
    export default {
    };
    </script>
    
    <template>
      <h1>404 咩有~</h1>
    </template>
    
    <style lang="scss" scoped>
    </style>
    

     


:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D33%26tbdsn%3D1881

計數器

今天: 2850285028502850
昨天: 3755375537553755
總計: 4458689445868944586894458689445868944586894458689