Nuxt异步获取-CFANZ编程社区

Nuxt异步获取

安装 @nuxtjs/axios:

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

npm install @nuxtjs/axios

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

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

使用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}
    }
}

0 条评论