nuxtjs 环境中添加全局axios

Posted 2021-03-16 Xuhua123

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