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)
      })
  }