×
  • Web前端首页
  • Vue3
  • vue3每日一学:用实例说明如何使用Suspense加载异步数据

vue3每日一学:用实例说明如何使用Suspense加载异步数据

作者:jquery2023.02.07来源:Web前端之家浏览:2783评论:0
关键词:vue3Suspense

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 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 scoped></style>

效果

调用请求的 loading效果

loading....

请求 返回数据时候

image.png

请求 返回错误时候

参数错误

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/vue3Suspense.html

网友评论文明上网理性发言 已有0人参与

发表评论: