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

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

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

方法一：普通的方式 

1 .npm或者yarn安装依赖包

1 $ npm install axios -S

2 . 引入到组件中

 

1 import axios from 'axios'; 2  3 export default { 4   /* 其他代码 */ 5    // 使用Promise  6    asyncData ({params}) { 7       return axios.get(`https://maoyan.com/ajax/cities`) 8          .then(res => { 9              console.log(res)10           })    11   }12       13   // 使用 async ... await  ， 与Promise选择一种即可14   async asyncData({params}) {15     let { res } = await axios.get(`https://maoyan.com/ajax/cities`) 17     console.log(res)    18   }19     20   /*其他代码*/21 }

 

方法二：集成的方式

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

1 modules: [ 2     '@nuxtjs/axios', 3     '@nuxtjs/bulma' 4 ], 5   /* 需要使用 aixos必须配置以下两项axios和proxy*/ 6   axios: { 7     prefix: '/api/', 8     proxy: true 9 },10 11 proxy: {12     '/api/': {13       target: 'https://maoyan.com/',14       pathRewrite: {15         '^/api/': ''16       }17     }18  },

 

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

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