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
效果。