# 前言
Nuxt的数据请求是放在asyncData钩子里的，而Vue项目一般是放在mounted钩子里，区别在于：
asyncData是早在页面挂在前就执行的，即在服务端就拿到数据然后渲染；
mounted是页面在客户端挂载完成后去请求的数据，然后在客户端进行的前端渲染。
官网参考
# 安装
Nuxt有自己的axios模块，使用上与普通的axios没有什么不同
安装
npm install @nuxtjs/axios --save
nuxt.config.js 配置
export default{
modules: ['@nuxtjs/axios']
}
以上两步后就可以正常使用axios进行数据请求了，修改了nuxt.config.js记得重启
# asyncData
asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。
注意：由于
asyncData方法是在组件初始前被调用的，所以在方法内不能通过this来引用组件的实例对象。
有两种方式可以使用asyncData方法:
1. 返回一个Promise
nuxt.js 会等待该Promise被解析之后才会设置组件的数据，从而渲染组件。
export default {
asyncData({ $axios, params }) {
return $axios.get(`https://xxx.xxx.xxx.xxx/getInfos/${params.id}`).then(res => {
return { title: res.data.title }
})
}
}
注意：这里的
title会被合并到当前页面组件的data中，即用this.title可以访问或使用。
2. 1. 使用async await
export default {
async asyncData({$axios, params }) {
const { data } = await $axios.get(`https://xxx.xxx.xxx.xxx/getInfos/${params.id}`)
return { title: data.title }
}
}
如果您的项目中直接使用了
node_modules中的axios，并且使用axios.interceptors添加拦截器对请求或响应数据进行了处理，确保使用axios.create创建实例后再使用。否则多次刷新页面请求服务器，服务端渲染会重复添加拦截器，导致数据处理错误。
import axios from 'axios'
const myaxios = axios.create({
// ...
})
myaxios.interceptors.response.use(
function (response) {
return response.data
},
function (error) {
// ...
}
)
温馨提示：
在使用asyncData钩子函数时，我们可以直接解构出$axios去发送请求获得数据，比如$axios.get、$axios.post等。因为我们使用了nuxtjs/axios这个模块。也正因如此，我在页面的其他地方，比如mounted的钩子函数里，可以直接使用this.$axios.get、this.$axios.post等来发起请求。
如果使用的是axios模块，则需要按照之前vue的那套封装逻辑进行操作，两者还是有些许差别的。
网友评论