英文:
Axios + VueJs3: Display the Results using Async Export
问题
以下是您要翻译的代码部分：
我正在使用vue.js3与vite和axios。
我定义了一个带有此函数的TS文件：
export async function findAllCompanies() {
try {
const {data, status} = await axios.get<CompanyPojoResponse>(
'http://localhost:9050/api/v1/company/all',
{
headers: {
'Content-Type': 'application/json',
Authorization: 'Basic YWRtaW46YWRtaW5QYXNz',
},
},
);
console.log(JSON.stringify(data, null, 4));
// ?? "response status is: 200"
console.log('response status is: ', status);
return data;
} catch (error) {
if (axios.isAxiosError(error)) {
console.log('error message: ', error.message);
console.log('error message: ', error);
return error.message;
} else {
console.log('unexpected error: ', error);
return 'An unexpected error occurred';
}
}
}
然后，我尝试在一个vue文件中显示它：
<script setup lang="ts">
import type {CompanyPojo} from "@/rest/restapi-companies";
import {findAllCompanies} from "@/rest/restapi-companies";
let companyResult = findAllCompanies()
console.log(companyResult)
</script>
<template>
<div class="top-nav">
<nav>
<RouterLink to="/new-company">New Company</RouterLink>
<!-- view product list -->
<!-- create new product -->
</nav>
</div>
<table id="companyTable">
<thead>
<tr>
<th>JUST EVERYTHING....</th>
</tr>
</thead>
<tbody>
<tr v-for="company in companyResult">
<td>{{ company }}</td>
</tr>
</tbody>
</table>
</template>
请注意，上述代码包括Vue.js、Vite和Axios的相关内容。如果您需要关于特定部分的帮助或翻译，请提供更具体的信息。
英文:
I am using vue.js3 with vite and axios.
i defined a TS file with this function:
export async function findAllCompanies() {
try {
const {data, status} = await axios.get<CompanyPojoResponse>(
'http://localhost:9050/api/v1/company/all',
{
headers: {
'Content-Type': 'application/json',
Authorization: 'Basic YWRtaW46YWRtaW5QYXNz',
},
},
);
console.log(JSON.stringify(data, null, 4));
// ?? "response status is: 200"
console.log('response status is: ', status);
return data;
} catch (error) {
if (axios.isAxiosError(error)) {
console.log('error message: ', error.message);
console.log('error message: ', error);
return error.message;
} else {
console.log('unexpected error: ', error);
return 'An unexpected error occurred';
}
}
}
then, i am trying to display it in a vue-file:
<script setup lang="ts">
import type {CompanyPojo} from "@/rest/restapi-companies";
import {findAllCompanies} from "@/rest/restapi-companies";
let companyResult = findAllCompanies()
console.log(companyResult)
</script>
<template>
<div class="top-nav">
<nav>
<RouterLink to="/new-company">New Company</RouterLink>
<!-- view product list -->
<!-- create new product -->
</nav>
</div>
<table id="companyTable">
<thead>
<tr>
<th>JUST EVERYTHING....</th>
</tr>
</thead>
<tbody>
<tr v-for="company in companyResult">
<td>{{ company }}</td>
</tr>
</tbody>
</table>
</template>
I see results within the logs, but not at the page (added company just for testing)
trying to access fields:
<td>{{ company.name }}</td>
<td>{{ company.additionalName }}</td>
is just resulting in an error, that CompanyPojoResponse does not have those fields.
which i really don't understand, since:
export type CompanyPojoResponse = {
data: CompanyPojo[];
};
I thought i am looping over the data at this point and then i loop therefor over CompanyPojo-Objects...
答案1
得分: 1
findAllCompanies() 是一个异步函数，你没有等待承诺被解决。
你可以像这样做：
const companyResult = ref([]) //将其初始化为空数组
onMounted(async () => {
companyResult.value = await findAllCompanies()
})
英文:
Your findAllCompanies() is an async function, you are not waiting for the promise to be resolved.
You can do something like this:
const companyResult = ref([]) // Initialize this as an empty array
onMounted(async () => {
companyResult.value = await findAllCompanies()
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论