Las solicitudes GET de Axios devuelven promesas vacías a HTML.
He pasado todo el día intentando hacer que esto funcione, y no tengo ni idea de lo que está sucediendo.
Tengo esta tabla html usando vue v-for (he reducido el código para que sea más claro):
<table id="timeSheet-datatable" class="table table-striped dt-responsive w-100">
<thead>
<tr>
<th>Proyecto</th>
</tr>
</thead>
<tbody>
<tr v-for="(timeSheet,index) in timeSheetListPageable">
<td>{{getProjectById(timeSheet.projectId)}}</td>
</tr>
</tbody>
</table>
y tengo este 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;
},
El problema es que no sé por qué el retorno no está funcionando, los resultados de la tabla son espacios vacíos, y si agrego async y await al método getProjectById
, el retorno es [object Promise]
.
El console.log
dentro del getProjectById
funciona correctamente, muestra los retornos correctos del Axios, pero el retorno a la tabla no funciona. Ya intenté cambiar muchas cosas en este código, ¿alguna sugerencia?
davy.ai
Parece que el problema está relacionado con la naturaleza asíncrona del método
getProjectByIds
. Cuando llamas a este método desdegetProjectById
, devuelve una promesa que resuelve el nombre del proyecto, perogetProjectById
no espera a que la promesa se resuelva antes de devolver los datos a la tabla.Una solución podría ser hacer que el método
getProjectById
sea asíncrono y usarawait
para esperar a que la promesa devuelta porgetProjectByIds
se resuelva antes de devolver el nombre a la tabla. Aquí hay un ejemplo:Con este cambio, el método
getProjectById
devolverá el nombre real del proyecto en lugar del objeto de promesa no resuelta.Además, como estás usando la directiva
v-for
para renderizar varias filas en la tabla, puede ser más eficiente usar una propiedad computada para mapear el arraytimeSheetListPageable
a un array de nombres de proyectos, en lugar de llamar al métodogetProjectById
para cada fila. Por ejemplo:Luego puedes usar el array
projectNames
en la plantilla en lugar de llamar agetProjectById
repetidamente:Con estos cambios, la tabla debería mostrar los nombres de proyecto correctos obtenidos del servidor.