Vue3:异步加载await ＜suspense＞

异步加载await @TOC

1. public静态资源中放入data.json数据:

{
  "data": {
    "name": "admin",
    "age": 23,
    "url": "",
    "desc": "胜多负少的份上水电费seafood水电费收到是是地方是水电费 "
  }
}

2. 原生封装axios.ts，也可以引入axios使用加载静态资源数据data.json:

// 原生封装axios
export const axios = {
    get<T>(url: string):Promise<T> {
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest()
            xhr.open('GET', url)
            //状态回调判断
            xhr.onreadystatechange = () => {
                //4状态
                if (xhr.readyState == 4 && xhr.status == 200) {
                    setTimeout(() => {
                        resolve(JSON.parse(xhr.responseText))
                    },2000)
                }
            }
            xhr.send(null)
        })
    }
}

3. 子组件Child.vue 调用axios 请求静态数据

<template>
  <div class="sync">
  <!--4. -->
    <div class="sync-content">
      <div><img :src="data.url"></div>
      <div class="sync-pop">
        <div>{{ data.name }}</div>
        <div>&nbsp;{{ data.age }}</div>
      </div>
    </div>
    <hr/>
    <div>{{ data.desc }}</div>
  </div>
</template>
<script lang="ts" setup>
//1.
import {axios} from '../server/axios.ts'
//2.
interface Data {
  data: {
    name: string,
    age: number,
    url: string,
    desc: string
  }
}
//3.
const {data} = await axios.get<Data>('./date.json')
</script>
<style lang="scss" scoped>
</style>

4. 父组件Home.vue,使用defineAsyncComponent异步组件引入

<template>
<!-- 必须使用suspense标签包裹异步组件-->
  <suspense>
    <!--3. 异步加载组件-->
    <!--    #default异步默认插槽位置-->
    <template #default>
      <SyncVue></SyncVue>
    </template>
    <!--4. 延迟加载区域实际内容没显示出来，做的一些事比如说loading...显示-->
    <!--    #fallback 异步延迟内容返回：先做响应延后出结果-->
    <template #fallback>
      <Gujia></Gujia>
    </template>
  </suspense>
</template>

<script lang="ts" setup>
import {defineAsyncComponent} from "vue";
//2.加载之前做的事没啥内容写了个div 加了个边框自行发挥
import Gujia from './Gujia.vue'
// 同步引入
import Child from './Child.vue'
//1.异步组件引入
const SyncVue = defineAsyncComponent(() => import('./Child.vue'))
</script>
<style lang="scss" scoped>
</style>

5 补充内容，异步同步引入组件打包拆解：
Home.vue 中：使用import(‘./Child.vue’)引入组件，打包会进行拆包
项目打包 npm run build
打包dist文件
assets文件中
index..js为主包，没有异步组件就是一个js文件
Sync..js为异步拆解包，保证项目内容加载量降低，提高用户的友好度
有些细节待补充新手白了白白