Vue3 增加了很多让人眼前一亮的特征，suspense 组件就是其中之一，对处理异步请求数据非常实用，本文通过简单的实例介绍其使用方法，如对其有兴趣，可以参阅官方文档。
通常组件在正确呈现之前需要执行某种异步请求是很常见的，通常是通过设计一种机制开发人员按照机制处理这个问题，有很多很好的方法实现这个需求。
例如，从一个 API 异步获取数据，并希望在获取响应数据解析完时显示一些信息，如 loading 效果，在Vue3中可以使用 suspense 组件来执行这样的需求。
创建组件
创建一个组件并将其命名为Peoples.vue，其组件代码如下:
<template><divv-for="(people,index)inpeoples.results":key="index">{{people.name}}{{people.birth_year}}</div></template><script>import{ref}from"vue";exportdefault{name:"CyPeoples",asyncsetup(){constpeoples=ref(null);constheaders={"Content-Type":"application/json"};constfetchPeoples=awaitfetch("https://swapi.dev/api/people",{headers,});peoples.value=awaitfetchPeoples.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>importCyPeoplesfrom"./components/Peoples.vue";import{suspense}from"vue";exportdefault{name:"App",components:{CyPeoples,suspense,},};</script>从上面的代码片段中，使用组件 suspense 可以很简单就实现了 loading 的效果，带有 #default 为初始化模板组件，显示异步请求完成之后的 UI 。带有 #fallback 为异步请求中的处理 UI ，即常见的 loading 效果。
总结
suspense 组件为Vue3的一个新特性，简化异步请求UI的处理逻辑。