您的位置：首页 > 编程技术 > js  >  vue3之Suspense加载异步数据的使用

vue3之Suspense加载异步数据的使用

 更新时间：2023年2月8日 16:13  点击：821 作者：小渣亮

Suspense使用

<template>
  <Suspense>
    <template #default>
      <ProductList></ProductList>
    </template>
    <template #fallback> <div>loading...</div> </template>
  </Suspense>
</template>

<script setup lang="ts" name="Cart">
import ProductList from "./ProductList.vue";
</script>
<style lang="scss" scoped></style>

组件

使用 flag 与 Promise 来模拟异步加载数据，渲染成功与失败的页面效果

<!-- -->
<template>
  <div v-if="data">
    ProductList
    <div>data父 - {{ data }}</div>
  </div>
  <div v-if="err">
    {{ err }}
  </div>
</template>

<script setup lang="ts" name="ProductList">
import { ref } from "vue";

const data = ref<any>(null);
const flag = false;
const err = ref(null);
function aaa() {
  return new Promise((resolve) => {
    setTimeout(() => {
      if (!flag) {
        return resolve({ code: 0, errorMsg: "参数错误" });
      }
      return resolve({
        code: 200,
        data: {
          result: 42,
        },
      });
    }, 3000);
  });
}
const res = await aaa();
console.log(res);

if (res.code === 200) {
  data.value = res.data.result;
} else {
  data.value = "";
  err.value = res.errorMsg;
}
</script>
<style lang="scss" scoped></style>

效果

调用请求的 loading效果

在这里插入图片描述

请求 返回数据时候

在这里插入图片描述

请求 返回错误时候

在这里插入图片描述

 到此这篇关于vue3之Suspense加载异步数据的使用的文章就介绍到这了,更多相关vue3 Suspense加载异步内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

原文出处：https://blog.csdn.net/weixin_43845137/article/details/127836

[!--infotagslink--]

相关文章

  • 浅谈vue2的$refs在vue3组合式API中的替代方法

    这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-18

  • 深入分析C#中的异步和多线程

    这篇文章主要介绍了C#中异步和多线程的相关资料，帮助大家更好的理解和学习c#，感兴趣的朋友可以了解下...2021-01-16

  • C#多线程与异步的区别详解

    多线程和异步操作两者都可以达到避免调用线程阻塞的目的，从而提高软件的可响应性。甚至有些时候我们就认为多线程和异步操作是等同的概念。但是，多线程和异步操作还是有一些区别的。而这些区别造成了使用多线程和异步操作的时机的区别...2020-06-25

  • 详解C# Socket异步通信实例

    本篇文章主要介绍了C# Socket异步通信,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2020-06-25

  • Vue3 编译流程-源码解析

    今天将从 Vue 的入口文件开始，看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里，感兴趣的小伙伴不要错过奥...2021-09-25

  • JS异步的执行原理和回调详解

    这篇文章主要给大家介绍了关于JS异步的执行原理和回调的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-08

  • vue3弹出层V3Popup实例详解

    这篇文章主要介绍了vue3弹出层V3Popup实例详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-01-04

  • c# winform异步不卡界面的实现方法

    这篇文章主要给大家介绍了关于c# winform异步不卡界面的实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用c#具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧...2020-06-25

  • vue3源码剖析之简单实现方法

    源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下...2021-09-07

  • Vue3中reactive函数toRef函数ref函数简介

    这篇文章主要介绍了Vue3中的三种函数，分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍，有需要的朋友可以借鉴参考下...2021-09-24

  • JQuery基于FormData异步提交数据文件

    这篇文章主要介绍了JQuery基于FormData异步提交数据文件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-02

  • 利用Vue3 创建Vue CLI 项目（一）

    这篇文章主要介绍利用Vue3 创建Vue CLI 项目，下面文章内容附有官方文档链接，安装过程，需要的可以参考一下...2021-10-18

  • 浅谈Vue3的几个优势

    这篇文章主要给大家分享的是Vue3的几个优势，Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化，下面我们一起进入文章看看具体详情吧...2021-10-26

  • 如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)

    ECharts地图主要用于地理区域数据的可视化，展示不同区域的数据分布信息，通过本文给大家介绍如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据，需要的朋友参考下吧...2016-02-26

  • JQuery异步提交表单与文件上传功能示例

    这篇文章主要介绍了JQuery异步提交表单与文件上传功能,结合实例形式分析了jQuery表单提交及文件传输操作的相关实现技巧,需要的朋友可以参考下...2017-01-16

  • 利用vue3+ts实现管理后台（增删改查）

    这篇文章主要介绍了利用vue3+ts实现管理后台(增删改查),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-10-30

  • C#异步的世界(下)

    这篇文章主要介绍了C#异步的世界(下)，对异步感兴趣的同学，可以参考下...2021-04-26

  • vue3封装放大镜组件的实例代码

    这篇文章主要给大家介绍了关于vue3封装放大镜组件的相关资料,封装之后,使用起来就更简单了,一个组件一行就可以,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-09-20

  • c#异步操作后台运行(backgroundworker类)示例

    这篇文章主要介绍了c#异步操作后台运行(backgroundworker类)示例,需要的朋友可以参考下...2020-06-25

  • ASP.Net中的async+await异步编程的实现

    这篇文章主要介绍了ASP.Net中的async+await异步编程的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-09-22