关于#javascript#的问题：怎么通过id去请求接口获取对应名称并返回，需要将id转换为用户名

Question

怎么通过id去请求接口获取对应名称并返回，
需要将id转换为用户名
代码如下，有人帮忙解答一下吗，用的是vue3，最好能给出代码

<template>
    <el-card shadow="never" body-style="padding:10px;" v-for="(item, index) in list" :key="index">
        <div class="title">{{ item.title }}</div>
        <div class="title-info">
            <el-text class="mx-1" v-for="cat in catList">
                <span v-if="cat.id === item.articleCatId">
                    {{ cat.catName }}
                </span>
            </el-text>
            <el-text class="mx-1">
                <span>
                    <!-- 将用户id转换为用户名称 -->
                    {{ item.userinfoId }}
                </span>
            </el-text>
        </div>
    </el-card>
</template>
<script setup>
import { getCatNameById } from '@/api/article'
// getUserById为已封装好的axios请求，接收用户id，返回用户信息
import { getUserById } from '@/api/user'
import { ref, computed } from 'vue'
defineProps(['list', 'catList'])


</script>
<style scoped>
.title {
    width: 100%;
    word-wrap: none;
    overflow: hidden;
}

.title-info {
    margin-top: 10px;
}
</style>

Answer 1

【以下回答由 GPT 生成】

首先，你可以在<script setup>标签内引入需要的依赖，如getCatNameById和getUserById。 然后，你可以在组件中定义一个ref变量来存储从接口中获取的名称和用户名。 接下来，在组件的生命周期钩子函数（如onMounted）中，通过调用接口方法来获取对应的名称和用户名，并将其存储到之前定义的ref变量中。 最后，在模板中使用这些变量来展示对应的名称和用户名。

以下是一个示例代码：

<template>
    <el-card shadow="never" body-style="padding:10px;" v-for="(item, index) in list" :key="index">
        <div class="title">{{ item.title }}</div>
        <div class="title-info">
            <el-text class="mx-1" v-for="cat in catList">
                <span v-if="cat.id === item.articleCatId">{{ cat.catName }}</span>
            </el-text>
            <el-text class="mx-1">
                <span>
                    <!-- 展示通过id获取的用户名 -->
                    {{ item.userName }}
                </span>
            </el-text>
        </div>
    </el-card>
</template>

<script setup>
import { getCatNameById } from '@/api/article'
import { getUserById } from '@/api/user'
import { ref, onMounted } from 'vue'

defineProps([])

// 定义一个ref变量用于存储通过id获取的名称和用户名
const name = ref('')
const userName = ref('')

// 在组件加载完成后获取对应的名称和用户名
onMounted(async () => {
    // 通过id获取对应的名称
    const catName = await getCatNameById(item.articleCatId)
    name.value = catName

    // 将id转换为用户名
    const user = await getUserById(item.userinfoId)
    userName.value = user.name
})

</script>

请注意，这只是一个示例代码，你需要根据实际情况进行修改和适配。同时，你需要确保getCatNameById和getUserById方法在api文件中正确定义和实现，并且返回对应的数据。

【相关推荐】

• 这篇博客: 【VUE】微商城（十一）----购物车下订单，选择收货地址，商品详情页立即购买，取消订单，查看订单详情中的          4、订单详情页接收传递的参数id，并根据id去请求订单详情信息 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^