最近使用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)
})
}