vue3 使用async await

时间:2025-01-30 13:39:29

suspense 组件是 Vue3 新增的内置组件之一。它允许我们的应用程序在等待异步组件的同时渲染一些备用内容,让我们创造一个流畅的用户体验。

案例:将父组件外层通过suspense包裹

<suspense>
    <index-list ref="indexListRef" :theme-code="" :source-id="" :source-type=""></index-list>
</suspense>

案例: 在子组件方法内使用await

<script setup lang="ts">
  const onCount = async (code) => {
    const dimensionData = await proxy.$('/i-bi-analyze/index-center/bi/index-manage/condition/dimension', { params: { indexCode: code } }).then(({ data }) => data)
    ('dimensionData', dimensionData)
  }
</script>

案例: 在setup中直接使用await

<script setup lang="ts">
  const dimensionData = await proxy.$('/i-bi-analyze/index-center/bi/index-manage/condition/dimension', { params: { indexCode: 14205791113217 } }).then(({ data }) => data)
  ('dimensionData', dimensionData)
</script>