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

Question

我有一个使用组合 api 的 Vue3 应用程序，并且想要在setup函数内异步获取数据。

对我有用的方法：

---

与 Promise 一起工作

    <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>

---

但我无法像这样直接使用 async/await

    <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-composition / 如何在 setup() 中使用异步方法

和这篇链接文章

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

它应该有效。

发布的组件只是Vue 路由器渲染的默认Home.vue组件。因此，在App.vue中，我使用标签<router-view />并使用主路由加载应用程序。

我怎样才能标记setup为async？

Answer 1

首先请小心，因为Suspense仍然是实验性功能，并且可能随时更改......

为了async setup工作，组件本身必须在内部<suspense>......您的组件不在内部<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"”状态（可能是为了避免当异步组件足够快地解析时出现过多的屏幕闪烁）suspensetimeout

timeout可以指定一个prop - 如果挂起的树在超时阈值之后仍然处于挂起状态，则活动树将被卸载并被后备树替换。

timeout我现在无法找到默认值是什么。请随意根据自己的需要进行调整...