---
tags: Mike課程
---

# 整合現有個Nuxt Plugins
官網參考:https://nuxtjs.org/docs/directory-structure/plugins/
* npm安裝 axios套建

npm install @nuxtjs/axios

* nuxt,config,js / modules設定檔中加入

modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
  ],

* 如果要將axios另外寫一個錯誤的判定 可以在plugins下面新增一個axios,js檔案

> 裡面新增若API發生錯誤將會導入那個頁面

export default function ({ $axios, redirect }) {
    $axios.onError(error => {
      if (error.response.status === 500) {
        redirect('/sorry')
      }else if(error.response.status === 404){
        redirect('/404')  
      }
    })
  }

* nuxt.config.js中的plugins也要做設定引入全域變數

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

* 那在要傳入的頁面就不用每頁再寫一次error訊息

async asyncData({ $axios, $EventText }) {
    const res = await $axios.get(
      "https://vue-lessons-api.herokuapp.com/photo/list"
    );
    console.log(res.data);
  },