Vue泛型组件中使用await出现语法报错问题求助

你遇到的报错和泛型声明本身无关，核心原因是直接在<script setup>顶层使用await，但当前组件并非异步组件，不符合语法规则。下面是修复后的完整泛型组件代码：

完整代码 #

模板部分 #

<template>
    <v-autocomplete
        v-model="selectedItem"
        :loading="isLoading"
        :items="items"
        :label="label ?? 'Search'"
        return-object
        :rules="rules"
        :hide-no-data="true"
        :item-title="(x: T) => x.name" />
</template>

脚本部分 #

<script setup lang="ts" generic="T">
import type LookupApiClient from "@/js/api/lookupApiClient";
import { ref, onMounted } from "vue";

const props = defineProps<{
    label: string;
    rules: any[];
    apiClient: LookupApiClient<T>;
}>();

// 用泛型T替代any，实现类型安全
const selectedItem = defineModel<T>({ required: true });
const items = ref<T[]>([]);
const isLoading = ref<boolean>(false);

// 把API调用放到async函数中，结合组件生命周期更合理
onMounted(async () => {
    isLoading.value = true;
    try {
        const response = await props.apiClient.lookup(); 
        items.value = response;
    } catch (err) {
        // 可在此添加错误处理，比如提示用户加载失败
        console.error('加载数据失败:', err);
    } finally {
        isLoading.value = false;
    }
});
</script>

关键修复点 #

• 泛型改造：给<script setup>加上generic="T"，将所有any替换为T（包括defineModel、ref的类型声明，以及模板回调的参数类型），实现全链路类型校验。
• await的正确用法：把包含await的API调用逻辑包裹在async函数内，这里用onMounted钩子符合组件初始化的生命周期逻辑；如果需要组件启动时立即执行，也可以用立即执行的async函数：

  (async () => {
      isLoading.value = true;
      try {
          const response = await props.apiClient.lookup(); 
          items.value = response;
      } catch (err) {
          console.error(err);
      } finally {
          isLoading.value = false;
      }
  })();
  

• 状态兜底：通过try/catch/finally确保loading状态无论请求成败都会重置，避免页面一直处于加载状态。

内容的提问来源于stack exchange，提问作者Bassie