Vue3系列 =＞Suspense 异步请求好帮手

Suspense组件是Vue3中的知名功能之一。

• 它们允许我们的应用程序在等待异步组件时渲染一些后备内容，可以让我们创建一个平滑的用户体验。
  值得庆幸的是，Suspense组件非常容易理解，它们甚至不需要任何额外的导入!
• 可以解决异步请求的困境； Suspense是Vue3推出的一个内置的特殊组件； 如果使用Suspense,需要返回一个Promise
• 本文主要是展示一下加载多个异步组件的场景，遇到不稳定问题，及解决方法（加载单个，只需要引入单个组件即可）

1.创建第一个组件：
AsyncShow.vue

创建第一个组件：
<template>
    <h1>{{result}}</h1>
</template>

<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
    setup(){
        return new Promise((resolve)=>{
            setTimeout(()=>{
                return resolve({
                    result:96
                })
            },3000)
        })
    }
})
</script>

2.创建一个DogShow.vue组件

<template>
  <img :src="result && result.message" alt="">
</template>

<script lang="ts">
import axios from 'axios'
import { defineComponent} from 'vue'
export default  defineComponent({
   async setup(){
       const rawData = await axios.get('https://dog.ceo/api/breeds/image/random')
       return {
           result:rawData.data
       }
    }
})
</script>

3.app中：（自行引入两个组件，然后使用如下图中）

 <Suspense>
      <template #default>
       <div>
          <async-show />
          <dog-show />
       </div>
      </template>
      <template #fallback>
        <h1>loading...</h1>
      </template>
    </Suspense>

import AsyncShow from './components/AsyncShow.vue'
import DogShow from './components/DogShow.vue'

   components: {
    Modal,
    AsyncShow,
    DogShow
  }

注意有个坑

如果同时放两个组建的话,需要用一个父组件比如div去包裹,不然不会生效

并且浏览器会提示: