我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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  可以很简单就实现了 loading 的效果,带有 #default  为初始化模板组件,显示异步请求完成之后的 UI 。带有 #fallback 为异步请求中的处理 UI ,即常见的 loading 效果。

总结

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

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

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Vue3中如何使用suspense异步数据加载组件

Vue3中如何使用suspense异步数据加载组件,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。前言Vue3 增加了很多让人眼前一亮的特征,suspense 组件就是其中之一,
2023-06-20

vue3之Suspense加载异步数据的使用

本文主要介绍了vue3之Suspense加载异步数据的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-02-05

Vue3异步组件Suspense的使用方法详解

这篇文章主要介绍了Vue3异步组件Suspense的使用方法详解,需要的朋友可以参考下
2023-01-28

vue3之Suspense加载异步数据怎么使用

这篇文章主要介绍了vue3之Suspense加载异步数据怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue3之Suspense加载异步数据怎么使用文章都会有所收获,下面我们一起来看看吧。Suspens
2023-07-05

Vue3 中的 Suspense:异步组件加载与占位符管理

Suspense 是Vue3响应式系统中的一个重要组成部分,其设计理念源于React社区,并根据Vue生态的特点进行了优化。当Suspense包裹的异步组件还未准备好渲染时,它会显示提供的fallback内容,直到所有异步组件完成加载。

Vue3 用户体验的增加:异步组件与 Suspense 组件

懒加载组件是一种改善应用程序用户体验的简便方法,尤其是在我们的代码包很大或用户连接速度较慢的情况下。

ECharts异步加载数据与数据集的方法

本文小编为大家详细介绍“ECharts异步加载数据与数据集的方法”,内容详细,步骤清晰,细节处理妥当,希望这篇“ECharts异步加载数据与数据集的方法”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。异步加载数据E
2023-07-02

listview异步加载数据的方法是什么

在Android中,可以使用以下方法实现ListView的异步加载数据:1. 使用AsyncTask类:AsyncTask类是一个抽象类,用于在后台线程执行异步操作。可以通过继承AsyncTask类,并在后台线程中加载数据,然后在主线程中更
2023-09-26

vue3.0+vite2实现动态异步组件懒加载的方法

这篇文章主要介绍“vue3.0+vite2实现动态异步组件懒加载的方法”,在日常操作中,相信很多人在vue3.0+vite2实现动态异步组件懒加载的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue3.
2023-06-20

winform窗体异步加载数据的方法是什么

WinForm窗体异步加载数据的方法有多种,以下是其中几种常用的方法:1. 使用BackgroundWorker组件:BackgroundWorker是一个可在后台线程中执行操作的组件。可以在DoWork事件中执行耗时的操作,然后在RunW
2023-09-13

Android使用原生组件WebView加载网页和数据的方法

在Api中关于这个类的介绍大致就是这是一个可以显示网页的视图,如:webView.loadUrl(http://www.baidu.com/); 显示结果:还可以加载一些html的字符串,如:String str = "
2022-06-06

通过使用Ajax函数实现异步数据交换的方法

如何利用Ajax函数实现异步数据交互随着互联网和Web技术的发展,前端与后端之间的数据交互变得十分重要。传统的数据交互方式,如页面刷新和表单提交,已经不能满足用户的需求。而Ajax(Asynchronous JavaScript and
通过使用Ajax函数实现异步数据交换的方法
2024-01-26

详细讲解Android中使用LoaderManager加载数据的方法

Android的设计之中,任何耗时的操作都不能放在UI主线程之中。所以类似于网络操作等等耗时的操作都需要使用异步的实现。而在ContentProvider之中,也有可能存在耗时的操作(当查询的数据量很大的时候),这个时候我们也需要使用异步的
2022-06-06

vue的异步数据更新机制与$nextTick使用方法是什么

这篇文章主要讲解了“vue的异步数据更新机制与$nextTick使用方法是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue的异步数据更新机制与$nextTick使用方法是什么”吧!v
2023-07-05

编程热搜

目录