如何使用 Typescript 在 Vue 3.0 setup() 函数中使用 async/await

Question

（此问题已针对 JavaScript 回答，见下文，但此问题特定于 TypeScript，其行为不同）

我正在尝试使用打字稿在 Vue3.0 中使用异步功能。

没有异步，这段代码很好用：

// file: components/HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue'

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  async setup() { // <-- this works without 'async'
    const test = 'test'

    // await doSomethingAsynchronous()

    return {
      test,
    }
  },
})
</script>

随着async setup()组件“HelloWorld”从页面中消失，Firefox 控制台告诉我

"Uncaught (in promise) TypeError: node is null (runtime-dom.esm-bundler.js)"

当我更改async setup()为 时setup()，代码有效，但随后我将无法在 setup 函数中使用 async/await。

所以我的问题是：如何使用 Typescript 在 setup() 函数中使用 async/await？

编辑：

这个问题的答案：为什么在 Vue3中使用 async setup() 时我得到空白显示它async setup()确实适用于 JavaScript，所以我希望它也适用于 TypeScript。

Answer 1

另一种方法是这样做：

 const users = ref([]);
 
 (async () => {
   const res = await axios.get("https://jsonplaceholder.typicode.com/users");
   users.value = res.data;
   console.log(res);
 })()

 return {
   users,
 }

而且您不必等待它挂载，这类似于将created()与选项API一起使用。

注意：不要忘记始终有一个分号“;” 在 function 语句之前，否则 JavaScript 会认为前面的语句应该返回一个函数，例如下面的代码会导致错误“ref([]) is not a function”：

const users = ref([]) // No semicolon here

(async () => {

防止此错误的另一种方法是始终将分号放在函数定义的同一行，以下代码也有效：

;(async () => {

Answer 2

尝试使用onMounted钩子来操作异步调用：

 setup() {
    const users = ref([]);
    onMounted(async () => {
      const res = await axios.get("https://jsonplaceholder.typicode.com/users");
      users.value = res.data;
      console.log(res);
    });

    return {
      users,
    };
  },

现场演示

Answer 3

要在生命周期挂钩之前调用 API beforeCreate()，有几种方法：

1. 使用辅助函数（比 更优雅;(async () => {})()）：

// utils.ts
export const run = (asyncFn: () => Promise<void>) => asyncFn()

// utils.ts
export const run = (asyncFn: () => Promise<void>) => asyncFn()

2. 使用承诺链：

// component.vue
<script lang="ts" setup>
  import { ref } from 'vue'
  import { run } from './utils.ts'
  import { getUsers } from './api.ts'

  const users = ref([])

  run(async () => {
    // getUsers() gets called before beforeCreate()
    users.value = await getUsers()
    // ...
  })
</script>