vue3 如何在 setup 中调用异步方法

发表于 2023-07-14 分类于 Develop ， Javascript ， Vue ， Vue3.x 本文字数： 1.5k 阅读时长 ≈ 1 分钟

到目前为止，vue3 中的 setup 本身不能是异步函数，因此我们如果需要使用 async 函数，要将异步操作包装起来。可以通过以下方式实现：

方法一：使用 suspense

使用suspense 包裹你的组件，然后使用 async setup()。这种方式目前为实验性功能，不稳定。

<Suspense>
  <!-- 具有深层异步依赖的组件 -->
  <Dashboard />

  <!-- 在 #fallback 插槽中显示 “正在加载中” -->
  <template #fallback>
    Loading...
  </template>
</Suspense>

# 若使用 script setup 语法时，可以直接在里面使用 await 等待异步返回
<script setup>
export default {
  async setup() {
    // 在 `setup` 内部使用 `await` 需要非常小心
    // 因为大多数组合式 API 函数只会在
    // 第一个 `await` 之前工作
    const res = await fetch(...)
    const posts = await res.json()
    return {
      posts
    }
  }
}
</script>

方法二：使用生命周期钩子

可以在生命周期钩子中调用异步方法：

<script>
export default {
  setup() {
    const users = ref([]);
    onBeforeMount(async () => {
      const res = await axios.get("https://jsonplaceholder.typicode.com/users");
      users.value = res.data;
      console.log(res);
    });
    return {
      users,
    };
  },
}
</script>

方法三：将调用包裹在异步函数中

该方法与方法二原理相同：

<template>
  <div>{{ message }}</div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('');

    async function fetchData() {
      const response = await fetch('/api/data');
      const data = await response.json();
      message.value = data.message;
    }

    fetchData();

    return {
      message,
    };
  },
};
</script>

参考

本文参考了以下文章，在此报以诚挚谢意！