Nuxt异步获取

     Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法，使得我们可以在渲染组件之前异步获取数据。
     asyncData 方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。 在这个方法被调用的时候，第一个参数 context 被设定为当前页面的上下文对象，你可以利用 asyncData 方法来获取数据，Nuxt.js 会将 asyncData 返回的数据与 data 方法返回的数据一起合并后返回给当前组件。
     调用后台数据接口我们采用 axios 异步发送请求，所以下面我们要先安装它。

1. 安装 @nuxtjs/axios:

Nuxt.js 官方提供了 @nuxtjs/axios 模块，此模块中还包含了 axios 、@nuxtjs/proxy 模块。其中 @nuxtjs/proxy是解决 Nuxt 中跨域问题，进行代理转发请求。

所以我们只要安装@nuxtjs/axios 即可:

npm install @nuxtjs/axios

2. 在 nuxt.config.js 引入 @nuxtjs/axios 模块:

modules: [
'@nuxtjs/axios',
],

3. 使用asyncData方法
   (Nuxt.js 提供了几种不同的方法来使用 asyncData方法,下面提供两种方法)

• 方式1: 使用 axios 返回 Promise

<template>
    <div class="container">
        <h2> 首页标题： {{title}}</h2>
        <ul>
            <li>标题：{{data.title}}</li>
            <li>内容：{{data.content}}</li>
            <li>作者：{{data.author}}</li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            title: '博客文章列表页'
        }
    },
// 加载组件之前服务端会调用
// 方式1：使用了两个return
    asyncData({$axios}) {
        return $axios.$get('http://mengxuegu.com:7300/mock/5ea4394b2a2f716419f893be/blogweb/test')
            .then(response => {
                console.log('response', response)
                const data = response.data
                return { data }// {data: data}
            })
    } // head省略
} </script>

• 方式2: 使用 async与await

export default {
// 方式2 请求数据接口 async await
    async asyncData( {$axios} ) {
        const response = await
        $axios.$get('http://xxxxxxx/blog-web/test')
        console.log('response', response)
        return {data: response.data}
    }
}