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> <h2>星球大战人物</h2> </div> <suspense> <template #default> <CyPeoples /> </template> <template #fallback> <div> <h4>数据加载中……</h4> </div> </template> </suspense> </template> <script> import CyPeoples from "./components/Peoples.vue"; import { suspense } from "vue"; export default { name: "App", components: { CyPeoples, suspense, }, }; </script>
看完上述内容,你们掌握Vue3中如何使用suspense异步数据加载组件的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。