【无标题】Vue3 异步组件实现骨架屏效果

文章介绍了如何在Vue3中利用异步组件和axios来实现骨架屏效果。通过封装axios的get方法获取数据,然后使用`defineAsyncComponent`创建异步组件,在`Suspense`组件中定义默认内容和加载时的骨架屏组件,从而在数据加载期间展示骨架屏。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 Vue3 异步组件实现骨架屏效果

具体代码实现

// axios.ts 文件 路径:src/server/axios.ts
export const axios ={
get<T>(url:string):Promise<T>{
return new Promise((resolve)=>{
    const xhr = new XMLHttpRequest()
    xhr.open('GET',url)
    xhr.onreadystatechage = () =>{
        if(xhr.readyState == 4 && xhr.status == 200){
            setTimeout(()=>{
                resolve(JSON.parse(xhr.responseText))
                },2000)
            }
        }
    })
  }
}


 其他.vue组件
 

// 在该组件内进行使用
import {axios} from '@server/axios.ts'

// 定义接收回来的数据的类型
interface Data{
    data:{
        name:string,
        age:number,
        url:string,
        desc:string
    }
}
// 使用封装好的axios 方法发送get请求拿到数据
// 顶层await 技术  异步组件
// 使用axios库中的get方法从本地路径'./data.json'处获取数据,然后将获取到的数据解构赋值给变量data。
const {data} = await axios.get<Data>('./data.json')

App.Vue文件

// 1.在该组件引入 异步组件.vue组件
// SyncVue 为 引入的组件
const SyncVue = defineAsyncComponent(()=> import('@/components/xxx.vue')

// <template> 里面
<template>
   <Suspense>
   
    // 我们要展示的组件  -- 异步组件 带有资源
    <template #default>
        <SyncVue></SyncVue>
    </template>
    
    // 加载的时候显示的组件 -- 骨架屏
    <template #fallback>
        <skeletonVue></skeletonVue>
    </template>
    
   </Suspense>
</template>
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值