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

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异步数据加载组件的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注编程网行业资讯频道，感谢各位的阅读！