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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

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

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

    创建一个vite项目 性能决定成败;vite确实快: cmd 命令行(默认你已经安装了node & npm),执行npm init @vitejs/app vue-study – --template vue: cd至vue-study,npm install(安装依赖); npm run dev(启动项目): 创建组件 新建一个目录为pages,pages下面再新建一个目录contents,contens下面可以新建具体的组件目录页面,此时目录结构为 App.vue <template&g

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

    目录 前言 创建组件 总结 前言 Vue3 增加了很多让人眼前一亮的特征,suspense 组件就是其中之一,对处理异步请求数据非常实用,本文通过简单的实例介绍其使用方法,如对其有兴趣,可以参阅官方文档. 通常组件在正确呈现之前需要执行某种异步请求是很常见的,通常是通过设计一种机制开发人员按照机制处理这个问题,有很多很好的方法实现这个需求. 例如,从一个 API 异步获取数据,并希望在获取响应数据解析完时显示一些信息,如 loading 效果,在Vue3中可以使用 suspense 组件来执行这

  • C#使用Jquery zTree实现树状结构显示 异步数据加载

    C#使用Jquery zTree实现树状结构显示_异步数据加载 JQuery-Ztree下载地址:https://github.com/zTree/zTree_v3 JQuery-Ztree数结构演示页面:  http://www.treejs.cn/v3/demo.php#_101 关于zTree的详细解释请看演示页面,还有zTree帮助Demo. 下面简要讲解下本人用到的其中一个实例(直接上关键代码了): 异步加载节点数据: A-前台: <link href="zTree_v3-mas

  • easyui datagrid 大数据加载效率慢,优化解决方法(推荐)

    在使用easyui datagrid途中发现加载数据的效率真的不是一般的差.经测试IE8加载300条数据就感觉明显的慢了,加载2000条数据就另人崩溃用时差不多60秒,就算在google浏览器测试结果也快不了几秒. 平时听闻easyui datagrid效率底下,自己测试才发现真是使人无法忍受. 笔者只好百度,google解决方法,发现一篇文章说改 //1.3.3版本是这样的,其它版本也是这句代码 $(_1e0).html(_1e4.join("")); 改为: $(_1e0)[0].

  • Oracle数据加载和卸载的实现方法

    在日常工作中:经常会遇到这样的需求: Oracle 数据表跟文本或者文件格式进行交互:即将指定文件内容导入对应的 Oracle 数据表中:或者从 Oracle 数据表导出. 其他数据库中的表跟Oracle数据库进行交互. 若是少量数据:可选择的解决方案有很多.常用的用 Pl/SQL developer工具,或者手动转换为 INSERT 语句,或者通过API.但数据量大:用上面的方法效率太烂了.本文来说说 Oracle 数据的加载和卸载. Oracle中的DBLINK Oracle加载数据-外部表

  • Vue3的setup在el-tab中动态加载组件的方法

    公司某项目需求在页面显示的组件是根据角色变化而变化的,在这个项目中我使用了elementplus的el-tabs来动态的显示这些组件,如下图所示 <template> <component style="margin-top:15px" v-for="item in pageList" :is="item.module_id"/> </template> 数据内容大概是这样的 在未使用setup语法糖时候我要引

  • vue在使用ECharts时的异步更新和数据加载详解

    前言 最近在学习eCharts,学习到了异步更新和数据加载这一块,觉着有必要总结一下,方法以后的时候参考学习,在开始本文之前,对eCharts不熟悉的朋友们可以参考下这篇文章:http://www.jb51.net/article/128790.htm  下面话不多说了,来一起看看详细的介绍吧. 使用方法 使用Echarts首先得先把Echarts.js引进来(放在文件的入口html文件里面) <script src="public/js/echarts.common.min.js&quo

  • vue实现按需加载组件及异步组件功能

    说实话,我一开始也不知道什么叫按需加载组件,组件还可以按需加载???后来知道了 学不完啊...没关系,看我的 按需加载组件,或者异步组件,主要是应用了component的 is 属性 template中的代码: 这里的每一个按钮,都要显示不同的组件,所以我让他们使用了同一个方法名 <template slot-scope="scope"> <el-button type="text" size="mini" @click=&qu

  • jQuery Ajax 加载数据时异步显示加载动画

    jQuery Ajax 加载数据时异步显示加载动画

    ajax加载后台数据就不说的那么细了. 看下面代码首先前台上放置代码 <div id="loadgif" style="width:66px;height:66px;position:absolute;top:50%;left:50%;"> <img alt="加载中..." src="../../Images/loading1.gif"/> </div> 在js脚本文件中首先把这个图片动画

  • Vue Router根据后台数据加载不同的组件实现

    目录 实际项目中遇到的需求 有一些不好的实现方式 个人感觉比较好的实现方式 功能已实现,但我又开始了新的思考 最终方案--高阶组件 实际项目中遇到的需求 同一个链接需要加载不同的页面组件.根据用户所购买服务的不同,有不同的页面展现. 有一些不好的实现方式 直接把这几个组件写在同一个组件下,通过v-if去判断.如果这么做的话,甚至可以不使用vue-router,直接把所有组件,都写在一个文件里面,全部通过v-if判断,也是可行的.(前提是几万行代码一起,你不嫌麻烦的话) 在渲染这个链接的时候,直接

  • Vue简易版无限加载组件实现原理与示例代码

    Vue简易版无限加载组件实现原理与示例代码

    目录 背景 实现功能 Props 使用 组件实现 scroll 事件 $emit 发射事件和 props 回调函数的区别 总结 背景 遇到的两个问题:scroll 事件不触发.如何将 loading 状态放在无限加载组件中进行管理. 无限加载组件在展示列表页数据时比较常见.特别是在 H5 列表页中,数据比较多,需要做分页,无限加载组件就是一个非常好的选择. 当列表页数据比较多时,一次性从服务端拿到所有的数据会比较耗时,长时间不展示列表数据,比较影响用户体验.所以对于一般的长列表数据,都会做分页.

随机推荐