无法将Vue设置函数标记为异步

Question

我有一个使用复合api的Vue3应用程序，希望在setup函数中异步获取数据。

对我有用的方法：

使用承诺

    <template>
      <div>{{ result }}</div>
    </template>
    
    <script lang="ts">
    import { defineComponent, ref } from "vue";
    
    export default defineComponent({
      setup() {
        const result = ref();
    
        fetch("https://api.publicapis.org/entries")
          .then((response: Response) => response.json())
          .then((jsonResponse: any) => {
            result.value = jsonResponse;
          });
    
        return { result };
      },
    });
    </script>

使用onMounted 钩子的

    <template>
      <div>
        {{ result }}
      </div>
    </template>
    
    <script lang="ts">
    import { defineComponent, ref, onMounted } from "vue";
    
    export default defineComponent({
      setup() {
        const result = ref();
    
        onMounted(async () => {
          const response = await fetch("https://api.publicapis.org/entries");
          result.value = await response.json();
        });
    
        return { result };
      },
    });
    </script>

但是我不能像这样直接使用异步/等待

    <template>
      <Suspense>
        <template #default>
          {{ result }}
        </template>
        <template #fallback> Loading... </template>
      </Suspense>
    </template>
    
    <script lang="ts">
    import { defineComponent, ref } from "vue";
    
    export default defineComponent({
      async setup() {
        const result = ref();
    
        const response = await fetch("https://api.publicapis.org/entries");
        result.value = await response.json();
    
        return { result };
      },
    });
    </script>

基于这个问题

@vue-复合/如何在安装程序()中使用异步方法

而这篇链接文章

https://vueschool.io/articles/vuejs-tutorials/suspense-new-feature-in-vue-3/

应该管用的。

posted组件只是Vue路由器呈现的默认Home.vue组件。因此，在App.vue中，我使用标记<router-view />并加载带有主路径的应用程序。

如何将setup标记为async

Answer 1

首先，请小心，因为Suspense仍然是实验特性，可以随时改变.

为了使async setup工作，组件本身--必须在<suspense> ....your组件中，而不是在<suspense>中--包含 <suspense>组件(当然，在创建组件之前不能工作，只有在async setup解析之后才能完成)。您必须将<suspense>作为<router-view> - 看医生的子代。

下面是一个工作演示 (如果您首先看到import declarations may only appear at top level of a module，只需使用重新加载图标重新加载右窗格-似乎是矩阵中的一些故障)

// App.vue
<router-view v-slot="{ Component }">
  <suspense timeout="0">
    <template #default>
      <component :is="Component"></component>
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </suspense>
</router-view>

// Home.vue
<template>
  <div class="home">
    <pre>{{ result }}</pre>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  async setup() {
    const result = ref();

    const response = await fetch("https://api.publicapis.org/entries");
    result.value = await response.json();

    return { result };
  },
});
</script>

注意，timeout="0" on suspense - 看起来有一个用于切换到“加载”状态的timeout (可能是为了避免异步组件足够快地解析时过多的屏幕闪烁)。

可以指定一个timeout支柱--如果挂起的树仍然挂起超过超时阈值，则活动树将被卸载并替换为回退树。

我现在无法找到timeout的默认值。你可以根据自己的需要调整它..。