如何在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 -> {...});
}