Nuxt异步获取

阳光穿透心脏的1/2处 2024-04-17 06:14 60阅读 0赞

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

1.  安装 `@nuxtjs/axios`:

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

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

npm install @nuxtjs/axios

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

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

1.  使用`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}
        }
    }