Typescript 返回值变量的类型为object promise，无法渲染

默认情况下，对象是由Promise返回的，据我所知，我需要有一个await或then来初始化RES到另一个本地创建的对象的映射.

Axios呼叫

async getAllCourses() {
    try {
        const res = await request.get<ResponseData>("/v1/courses");

        return res.data

    } catch (err) {
        console.error(err)
    }
},

这很管用

let results: Course[];

let courses = api.getAllCourses().then((res: ResponseData) => {

    results = res.data

    return results
})

然而，这并不意味着:

let courses = await api.getAllCourses().then((res: ResponseData) => {

    let c: Course[];
    c = res.data

    return c
})

export default interface ResponseData {
    data: any;
}

-数据来自服务器

{
    "data": [
        {
            "ObjectId": "649419c9e26f71024a0d5901",
            "id": "",
            "title": "算法rithms",
            "description": "An awesome GO course",
            "lessons": "5",
            "duration": "7 hours",
            "course_details": {
                "title": "",
                "instructor": "Mike",
                "introduction": "",
                "learn": "Lets do this",
                "topics": "foo, bar, yes",
                "prerequisites": "basic golang skills",
                "goal": "To Make you Amazing",
                "additionalDetails": "",
                "highLevelOverview": ""
            }
        },
        {
            "ObjectId": "64953ac1bf06bfdd7936cad8",
            "id": "",
            "title": "Python 算法rithms",
            "description": "An awesome Python course",
            "lessons": "5",
            "duration": "7 hours",
            "course_details": {
                "title": "",
                "instructor": "Mike",
                "introduction": "",
                "learn": "Lets do this",
                "topics": "foo, bar",
                "prerequisites": "basic",
                "goal": "It will Make you Amazing at Python",
                "additionalDetails": "",
                "highLevelOverview": ""
            }
        },
        }
    ],
    "metadata": "none"
}

我希望保留将响应映射到方法中的ts对象的逻辑.

这样做的正确方法是什么？

-更新1-

我现在有了

export default interface ResponseData<T = any> {
    data: T;
}

Axios呼叫

export const api = {

    async getAllCourses(): Promise<Course[]> {

        const res = await request.get<ResponseData<Course[]>>("/v1/courses");

        return res.data.data

    },

}

组件

<script setup lang="ts">
import { api } from "../lib/api";

import Course from "../组件s/courses/Course.vue";
import Filter from "../组件s/courses/Filter.vue";
import ResponseData from "../lib/models/ResponseData";

const courses = await api.getAllCourses()

</script>

没有错误，也没有呈现任何内容:(

I did see however the array in the Axios呼叫 when I console.log(res.data)

-更新2

我让它工作了，但有时它不能渲染.我刷新了它几次，然后有时它会渲染.

let courses = api.getAllCourses().then((res: Course[]) => {

    results = res

    return results
})

阿西奥斯

async getAllCourses(): Promise<Course[]> {
    const res = await request.get<Course[]>("/v1/courses");

    console.log(res.data)

    return res.data

},

-

<div class="grid grid-cols-2 h-4 md:w-4/5 p-4">
    <div class="md:grid-cols-2 lg:grid-cols-1 col-gap-2 md:col-gap-8 md:row-gap-10" v-for='(course, index) in results'>
        <Course :key="index" :course="course"/>
    </div>
</div>