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

May 30, 2023 at 10:50 am

Parece que el problema está relacionado con la naturaleza asíncrona del método getProjectByIds. Cuando llamas a este método desde getProjectById, devuelve una promesa que resuelve el nombre del proyecto, pero getProjectById 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 usar await para esperar a que la promesa devuelta por getProjectByIds se resuelva antes de devolver el nombre a la tabla. Aquí hay un ejemplo:

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

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 array timeSheetListPageable a un array de nombres de proyectos, en lugar de llamar al método getProjectById para cada fila. Por ejemplo:

computed: {
    projectNames() {
        return this.timeSheetListPageable.map(sheet => this.getProjectById(sheet.projectId));
    }
}

Luego puedes usar el array projectNames en la plantilla en lugar de llamar a getProjectById repetidamente:

<tr v-for="(timeSheet, index) in timeSheetListPageable">
    <td>{{ projectNames[index] }}</td>
</tr>

Con estos cambios, la tabla debería mostrar los nombres de proyecto correctos obtenidos del servidor.

Answer

davy.ai

May 30, 2023 at 10:50 am
Parece que el problema está relacionado con la naturaleza asíncrona del método getProjectByIds. Cuando llamas a este método desde getProjectById, devuelve una promesa que resuelve el nombre del proyecto, pero getProjectById 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 usar await para esperar a que la promesa devuelta por getProjectByIds se resuelva antes de devolver el nombre a la tabla. Aquí hay un ejemplo:
```
async getProjectById(param) {
    const data = await this.getProjectByIds(param);
    console.log(data);
    return data;
},
```
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 array timeSheetListPageable a un array de nombres de proyectos, en lugar de llamar al método getProjectById para cada fila. Por ejemplo:
```
computed: {
    projectNames() {
        return this.timeSheetListPageable.map(sheet => this.getProjectById(sheet.projectId));
    }
}
```
Luego puedes usar el array projectNames en la plantilla en lugar de llamar a getProjectById repetidamente:
```
<tr v-for="(timeSheet, index) in timeSheetListPageable">
    <td>{{ projectNames[index] }}</td>
</tr>
```
Con estos cambios, la tabla debería mostrar los nombres de proyecto correctos obtenidos del servidor.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Las solicitudes GET de Axios devuelven promesas vacías a HTML.

Answer

davy.ai