Nuxt.js中Axios的使用

原文：https://blog.csdn.net/Calla_Lj/article/details/86592626

 

Nuxt.js中Axios的使用
1. 安装
npm install --save axios
1
2. 配置
为防止重复打包，在nuxt.config.js中配置

module.exports = {
build: {
vendor: ['axios']
}
}
1
2
3
4
5
3. 重启
每当更改nuxt.config.js中配置,需要重新启动项目:

npm run dev
1
4. 使用
必要知识储备:
Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。所以需要注意这个函数中不能使用this

注意：常规写法如果在created钩子中写异步，是在客户端渲染的而不是在服务端

使用方法：asyncData(context, callback) {callback(null, data)}

context.route.params.xxx获取参数或者context.params.xxx

callback(new Error(), data)渲染出错的页面

注意：这个方法在服务器端执行和在客户端执行的区别

import axios from 'axios'

asyncData(context, callback) {
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(res => {
console.log(res);
callback(null, {list: res.data})
})
}
————————————————
版权声明：本文为CSDN博主「Calla_Lj」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Calla_Lj/article/details/86592626