Vue3:异步加载await ＜suspense＞

article/2025/10/13 2:33:18

异步加载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为异步拆解包，保证项目内容加载量降低，提高用户的友好度在这里插入图片描述
有些细节待补充新手白了白白