nuxtjs中使用axios

最近使用nuxtjs服务端渲染框架，在异步请求时遇到两个问题，一是怎么使用axios， 二是怎么在asyncData方法中使用axios

当使用脚手架create nuxt-app创建项目时，会提示是否集成axios， 如果不选择，后面则使用方式一请求异步数据，如果选择,后面则使用方式二请求异步数据

如上图，按照提示到选择axios的步骤，键盘"up", "down"移动箭头，space空格键选择或者取消, 然后继续enter进入下一步即可。

方法一：普通的方式

1 .npm或者yarn安装依赖包

 $ npm install axios -S

2 . 引入到组件中

 import axios from 'axios';

 export default {
   /* 其他代码 */
    // 使用Promise
    asyncData ({params}) {
       return axios.get(`https://maoyan.com/ajax/cities`)
          .then(res => {
              console.log(res)
           })
   }

   // 使用 async ... await  ， 与Promise选择一种即可
   async asyncData({params}) {
     let { res } = await axios.get(`https://maoyan.com/ajax/cities`)
     console.log(res)
   }

   /*其他代码*/
 }

方法二：集成的方式

　　首先需要在配置文件nuxt.config.js中配置axios项

 modules: [
     '@nuxtjs/axios',
     '@nuxtjs/bulma'
 ],
   /* 需要使用 aixos必须配置以下两项axios和proxy*/
   axios: {
     prefix: '/api/',
     proxy: true
 },

 proxy: {
     '/api/': {
       target: 'https://maoyan.com/',
       pathRewrite: {
         '^/api/': ''
       }
     }
  },

在组件中使用axios， 无需在import引入, 直接使用this.$axios即可

 // 这里引入context是上下文参数，代替了this，
 // 因为在asyncData方法是在组件初始化时调用，所以没法通过this来引用组件实例对象。
 asyncData(context) {
     return context.$axios.get('ajax/cities')
       .then(res => {
         console.log(res)
       })
   }