Suspense

Suspense组件可以展示异步组件的加载状态，它和useRequest、useWatcher等hooks配合使用，可以展示异步组件的加载状态。

vue

Profile.vue

<template>
  <div v-if="error">{{ error.message }}</div>
  <div v-else>{{ data }}</div>
</template>

<script setup>
  // `useRequest`使用`await`关键词
  const { data, error } = await useRequest(alovaInstance.Get('/user/1'));
  if (error) {
    throw error; // 抛出错误也可以在上层组件通过onErrorCaptured捕获
  }
</script>

App.vue

<template>
  <suspense>
    <profile></profile>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </suspense>
</template>

react

敬请期待...