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

1. 先安裝一個外部套件

   npm install @nuxtjs/axios

   Copy

    

2. 將外部套件加入設定檔nuxt.config.js

   modules: ['@nuxtjs/axios'],

   Copy

    

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}
   },

   Copy

    

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')
       }
     })
   }

   Copy
6.  加入設定檔nuxt.config.js

   plugins: ["~/plugins/hello.js", "~/plugins/axios.js"],

   Copy

    

7. 如此當api傳回404或500時就會自動導向到 page/404.vue或500.vue（要自己做）

   <script>
   export default {
   };
   </script>
   
   <template>
     <h1>404 咩有～</h1>
   </template>
   
   <style lang="scss" scoped>
   </style>

   Copy