手记

如何在nuxt.js中使用axios?

nuxt.js是基于vue的服务器端渲染框架,它使得基于vue的SPA应用变得非常简单。axios是当下最热门的ajax前后端数据交互库。那么如何在nuxt.js中使用axios?

需要npm axios?

刚开始,我以为需要像普通的vue SPA开发那样,需要npm axios,这种方式的确可以生效。但在使用时并不方便。尤其是设置代理比较麻烦,而且在asyncData里与在普通methods里使用方式不一样。
后来在nuxt的github上发现了nuxt是默认集成了axios的,所以不需要npm axios,但是需要进行适当的配置。

配置axios

需要在项目的根目录下的nuxt.config.js中进行以下配置:

module.exports = {
        // ...
    modules: [
        '@nuxtjs/axios',
    ],
    axios: {
        prefix: '/api/',
        proxy: true // Can be also an object with default options
    },

    proxy: {
        '/api/': { target: 'http://localhost:8080', pathRewrite: {'^/api/': ''} }
    }
}

这样就配置好了axios和proxy。

使用

一般情况下,在组件中,可以这样使用:

this.$axios.get(url).then( res -> {...});

而在asyncData中,不能直接使用this引用。可以这样:

async asyncData ({ app }) {
    // 这里data等同于上面的res.data
    let { data } = await app.$axios.get(url).then( res -> {...});
}
9人推荐
随时随地看视频
慕课网APP

热门评论

楼主  ,你能写具体点吗,我按照你的步骤配置,会报错

楼主  ,你能写具体点吗,我按照你的步骤配置,会报错

如果使用 creat-nuxt-app 创建项目并且选择了axios的话,在asyncData方法中可以这么使用,

async asyncData ({ $axios }) {

    const { data } = await $axios.get('https://api.myjson.com/bins/mr6ma')

    return { info: data }

  },

在methods方法中可以这么使用,

async hh () {

      const { data } = await this.$axios.get('https://api.myjson.com/bins/mr6ma')

    }


查看全部评论