vue3之Suspense加载异步数据怎么使用

vue3之Suspense加载异步数据怎么使用

这篇文章主要介绍了vue3之Suspense加载异步数据怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue3之Suspense加载异步数据怎么使用文章都会有所收获，下面我们一起来看看吧。

Suspense使用

     
loading...
   import ProductList from "./ProductList.vue";

组件

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

import { ref } from "vue";const data = ref(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;}

效果

调用请求的 loading效果

请求 返回数据时候

请求 返回错误时候

关于“vue3之Suspense加载异步数据怎么使用”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue3之Suspense加载异步数据怎么使用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道。