经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue3之Suspense加载异步数据的使用
来源:jb51  时间:2023/2/8 8:56:26  对本文有异议

Suspense使用

  1. <template>
  2. <Suspense>
  3. <template #default>
  4. <ProductList></ProductList>
  5. </template>
  6. <template #fallback> <div>loading...</div> </template>
  7. </Suspense>
  8. </template>
  9.  
  10. <script setup lang="ts" name="Cart">
  11. import ProductList from "./ProductList.vue";
  12. </script>
  13. <style lang="scss" scoped></style>

组件

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

  1. <!-- -->
  2. <template>
  3. <div v-if="data">
  4. ProductList
  5. <div>data父 - {{ data }}</div>
  6. </div>
  7. <div v-if="err">
  8. {{ err }}
  9. </div>
  10. </template>
  11.  
  12. <script setup lang="ts" name="ProductList">
  13. import { ref } from "vue";
  14.  
  15. const data = ref<any>(null);
  16. const flag = false;
  17. const err = ref(null);
  18. function aaa() {
  19. return new Promise((resolve) => {
  20. setTimeout(() => {
  21. if (!flag) {
  22. return resolve({ code: 0, errorMsg: "参数错误" });
  23. }
  24. return resolve({
  25. code: 200,
  26. data: {
  27. result: 42,
  28. },
  29. });
  30. }, 3000);
  31. });
  32. }
  33. const res = await aaa();
  34. console.log(res);
  35.  
  36. if (res.code === 200) {
  37. data.value = res.data.result;
  38. } else {
  39. data.value = "";
  40. err.value = res.errorMsg;
  41. }
  42. </script>
  43. <style lang="scss" scoped></style>

效果

调用请求的 loading效果

在这里插入图片描述

请求 返回数据时候

在这里插入图片描述

请求 返回错误时候

在这里插入图片描述

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号