码迷,mamicode.com
首页 > 移动开发 > 详细

nuxtjs 环境中添加全局axios

时间:2020-01-13 20:21:01      阅读:387      评论:0      收藏:0      [点我收藏+]

标签:const   OLE   int   ===   时间   erro   making   app   ref   

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

nuxtjs 环境中添加全局axios

标签:const   OLE   int   ===   时间   erro   making   app   ref   

原文地址:https://www.cnblogs.com/xuhua123/p/12188906.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!