无法将 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 / How can I use asynchronous methods in 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> 内......你的组件不在 [=14= 内] - 它包含 <suspense> 组件（在创建组件之前当然不能工作，并且只有在 async setup 解析后才会发生）。您必须将 <suspense> 作为 <router-view> - see the docs

的子项

这是一个 working demo（如果您首先看到 import declarations may only appear at top level of a module，只需使用重新加载图标重新加载右侧窗格 - 似乎是 Matrix 中的一些小故障）

// 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" suspense - it seems 有一个 timeout 用于切换到“正在加载”状态（可能是为了避免异步组件时屏幕闪烁太多足够快地解决）

A timeout prop can be specified - if a pending tree remains pending past the timeout threshold, the active tree will be unmounted and be replaced by the fallback tree.

我现在找不到 timeout 的默认值。随意根据自己的需要进行调整...

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

Unable to mark Vue setup function as async

vue.js

vuejs3

vue-suspense