Axios GET请求向html返回空的promise

Question

我整天都在努力让它发挥作用，但我不知道发生了什么。

我有这个使用vue-v-for的html表(我减少了代码以使其更清晰(：

<table id="timeSheet-datatable" class="table table-striped dt-responsive w-100">
<thead>
<tr>
<th>Project</th>
</tr>
</thead>
<tbody>
<tr v-for="(timeSheet,index) in timeSheetListPageable">
<td>{{getProjectById(timeSheet.projectId)}}</td>
</tr>                                                   
</tbody>

我有这个js:

async getProjectByIds(param){
var result = '';
await axios
.get(`/project/${param}`).then(response => {
result= response.data.name;
}, response => {
(err) => console.log(err)
});
return await result;
},

getProjectById(param){
const data = this.getProjectByIds(param);
console.log(data)
return data;
},

问题是，我不知道为什么返回不起作用，表结果是空格，如果我向getProjectById方法添加async和wait，则返回为[object Promise]。

getProjectById工作属性中的console.log显示Axios的正确返回，但返回表不起作用。我已经尝试更改了这个代码中的很多内容，有什么建议吗？

Answer 1

axios.then()构造后的await result不会产生预期的顺序流。

您需要使用promise或多个await语句来使代码可读并正确执行。

async getProjectByIds(param){
var result = '';
try {
var response = await axios.get(`/project/${param}`)
result = response.data.name;
} catch (err) {
console.error(err)
}
return result;
},

async getProjectById(param){
const data = await this.getProjectByIds(param);
console.log(data)
return data;
},

我不确定实际的response.data语句。您可能需要也可能不需要在那里使用await。