Vue3异步数据加载组件suspense的使用方法

发布时间:2022-04-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Vue3异步数据加载组件suspense的使用方法脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

Vue3 增加了很多让人眼前一亮的特征,susPEnse 组件就是其中之一,对处理异步请求数据非常实用,本文通过简单的实例介绍其使用方法,如对其有兴趣,可以参阅官方文档

通常组件在正确呈现之前需要执行某种异步请求是很常见的,通常是通过设计一种机制开发人员按照机制处理这个问题,有很多很好的方法实现这个需求。

例如,从一个 API 异步获取数据,并希望在获取响应数据解析完时显示一些信息,如 loading 效果,在Vue3中可以使用 suspense 组件来执行这样的需求。

创建组件

创建一个组件并将其命名为Peoples.vue,其组件代码如下:

<template>
    <div v-for="(people, index) in peoples.results" :key="index">
        {{ people.name }} {{ people.birth_year }}
    </div>
</template>
<script>
import { ref } From "vue";
export default {
    name: "CyPeoples",
    async SETUP() {
        const peoples = ref(null);
        const headers = { "Content-type": "application/json" };
        const fetchPeoples = await fetch("https://swapi.dev/api/people", {
            headers,
        });
        peoples.value = awaIT fetchPeoples.json();
        return { peoples };
    },
};
</script>

这里将引入 ref 以确保组件状态的反应性。因此,根据上面的代码片段,通过异步 API 调用获取电影数据。
对于VUE项目中发起 HTTP 请求,通常是使用 Axios ,这里尝试使用 fetch 。

好的,现在就来使用 suspense 在应用程序内显示数据加载中的信息。

修改 App.vue 文件,使其代码如下:

<template>
    <div>
        <h1>星球大战人物</h1>
    </div>
    <suspense>
        <template #default>
            <CyPeoples />
        </template>
        <template #fallback>
            <div>
                <h3>数据加载中……</h3>
            </div>
        </template>
    </suspense>
</template>
<script>
import CyPeoples from "./components/Peoples.vue";
import { suspense } from "vue";
export default {
    name: "App",
    components: {
        CyPeoples,
        suspense,
    },
};
</script>

从上面的代码片段中,使用组件 suspense&nbsp; 可以很简单就实现了 loading 的效果,带有 #default  为初始化模板组件,显示异步请求完成之后的 UI 。带有 #fallback 为异步请求中的处理 UI ,即常见的 loading 效果。

总结

suspense 组件为Vue3的一个新特性,简化异步请求UI的处理逻辑。

到此这篇关于Vue3异步数据加载组件suspense的文章就介绍到这了,更多相关Vue3异步数据加载组件suspense内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!

脚本宝典总结

以上是脚本宝典为你收集整理的Vue3异步数据加载组件suspense的使用方法全部内容,希望文章能够帮你解决Vue3异步数据加载组件suspense的使用方法所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: