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

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

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加载异步数据怎么使用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。