nuxtjs 環境中添加全局axios

nuxtjs官方文檔： https://zh.nuxtjs.org/

身為小白的我，在使用axios做小demo的時候； 做了幾個頁面后，在需要通過發送axios請求獲取數據時，發現每個組件都需要重新引入 axios 依賴，這樣也太浪費時間了不是嗎?；

但可以看見nuxtjs沒有像vue-cli一樣直接添到全局的 main.js 和app.vue; 

廢話不多，直接代碼：

首先需要在  nuxt.config.js  添加代碼

{
  modules: [
    '@nuxtjs/axios',
  ],

  plugins: [
    '~/plugins/axios'
  ]
}

 

然后在根目錄的 plugins/axios.js  (所有的插件都是在這個 plugins中)

export default function ({ $axios, redirect }) {
  $axios.onRequest(config => {
    console.log('Making request to ' + config.url)
  })

  $axios.onError(error => {
    const code = parseInt(error.response && error.response.status)
    if (code === 400) {
      redirect('/400')
    }
  })
}

 

然后在該項目的任意組件中以   this.$axios  來使用axios； 在js文件中 使用  app.$axios  來使用axios