Vue SSR 项目 Nuxt.js 框架之《异步数据请求：asyncData》

# 前言

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的那套封装逻辑进行操作，两者还是有些许差别的。