PROBLEMA
Tu problema es de asincronía. Los métodos del tipo Array
de Javascript como forEach
, map
, etc. no son métodos pensados para usarse con código asíncrono. Es decir, la función callback
que pasas al método, será ejecutada de forma asíncrona si la declaras como tal, pero el método del Array
retornará justo después de hacer el llamado a la función callback
del último elemento iterado.
Esto quiere decir, que cualquier linea de código que tengas justo después de la llamada al método del Array
, se ejecutará inmediatamente, sin dar tiempo a que la función callback
asíncrona llamada por cada elemento del Array
devuelva un resultado.
Por ejemplo:
const miArray = [1, 2, 3, 4, 5];
let asyncArray = miArray.map(async num => {
return num * 2;
});
let noAsyncArray = miArray.map(num => {
return num * 2;
});
console.log(asyncArray);
console.log(noAsyncArray);
.as-console-wrapper {
min-height: 100%;
top: 0;
}
¿Qué sucede aquí? la única diferencia es que una función es declarada como asíncrona y la otra no. La tarea ejecutada por ambas es la misma, es decir no hay realmente un proceso asíncrono allí. Sin embargo, una función tipo async
devuelve un objeto Promise
, el cual es un tipo de objeto especial de Javascript que empaqueta un proceso asíncrono.
Podemos observarlo así:
const miArray = [1, 2, 3, 4, 5];
let asyncArray = miArray.map(async num => {
return num * 2;
});
console.log(asyncArray);
asyncArray.forEach(result => {
console.log(result instanceof Promise);
});
.as-console-wrapper {
min-height: 100%;
top: 0;
}
SOLUCIÓN
La solución va a depender de lo que intentas implementar o lo que necesitas hacer con el resultado del proceso asíncrono.
En tu pregunta tienes un método llamado resourceData
el cual es declarado como async
. Por lo tanto, aunque devuelvas un valor usando return
, el mismo será parte de una Promesa, tal como hemos visto hasta ahora. Vamos a dejar ese detalle para la última parte de la respuesta.
Tu método recibe 3 argumentos: userMood
(un objeto), songs
(una lista o array) y accessToken
(una cadena). Como no puedo poner un ejemplo exactamente igual haremos uso de algo parecido pero usando una API pública.
Para poder devolver los resultados de procesos asíncronos ejecutados sobre elementos de una lista, usaremos Promise.all()
que recibe un iterable y devuelve una Promesa, la cual es satisfactoria si todas las promesas del iterable son satisfechas. Si alguna de las promesas de los iterandos se rechaza, la promesa entonces es rechazada.
Como bien ya te han aclarado, el método forEach
no realiza alteraciones sobre la lista original, sin embargo, si deseamos devolver el resultado de nuestra función callback
, podemos usar el método map
, el cual devuelve un iterable.
Por ejemplo:
let listaDePromesas = lista.map(async elemento => { ... });
En este código la viarable listaDePromesas
será un Array
de Promesas. Cada elemento es el resultado de la función asíncrona pasada como callback
al método map
.
Ahora podemos pasar esta lista de promesas como parámetro al método Promise.all()
, el cual nos devuelve una Promesa.
Por ejemplo:
// Promise.all devuelve una promesa, puedo usar then() y catch()
Promise.all(listaDePromesas)
.then(resultados => {
// resultados es un Array
resultados.forEach(element => { console.log(element); })
})
.catch(console.error);
Como tu método es una función async
, se devuelve una Promesa, por lo tanto, podemos devolver directamente el objeto Promise.all()
. Por ejemplo, el siguiente código utiliza los conceptos vistos anteriormente y realiza unas peticiones de tipo fetch
, muy parecido al código que intentas usar en tu pregunta.
const resourceData = async (lista) => {
const promiseArray = lista.map(async country => {
try {
const result = await fetch(`https://randomuser.me/api/?nat=${country}`);
const json = await result.json();
const nombre = json.results[0].name.first + ' ' + json.results[0].name.last;
const pais = json.results[0].location.country;
const email = json.results[0].email;
return {nombre, pais, email}
}
catch(error) {
console.error(error.message);
throw error;
}
});
return Promise.all(promiseArray);
}
const countries = ['au', 'ca', 'es'];
// el método devuelve una Promesa, por lo tanto puedo usar then() y catch()
resourceData(countries)
.then(console.log)
.catch(console.error);
.as-console-wrapper {
min-height: 100%;
top: 0;
}
Esta sería una forma en la que puedes devolver
el resultado de una lista de procesos asíncronos.
En tu caso, se ve que deseas retornar un objeto con 3 valores: angry
, nervous
y bored
, los cuales (por lo visto en el código) representan una cifra numérica calculada a partir de la solicitud realizada.
Una forma de obtener el resultado para tu caso particular sería:
// resourceData es una función tipo async, por lo tanto devuelve una Promesa
const resourceData = async (userMood, songs, accessToken) => {
let angry = userMood.angry;
let nervous = userMood.nervous;
let bored = userMood.bored;
// creamos una lista de promesas
const promiseList = songs.map(async (song, index) => {
try {
const songId = song.track.id;
const features = await fetch(
`https://api.spotify.com/v1/audio-features/${songId}`,
{ headers: {'Authorization': `Bearer ${accessToken}`} }
);
const response = await features.json();
return {valence: response.valence, energy: response.energy}
} catch (error) {
console.log(`Hubo un error al procesar el elemento: ${index}`);
throw error;
}
});
// procesamos la lista de promesas
Promise.all(promiseList)
.then(results => {
// si todas las promesas de la lista se resuelven, puedo iterar el resultado
// para modificar los valores
results.forEach(element => {
if((element.valence >= 0 && element.valence < 0.33) &&
(element.energy > 0.75 && element.energy <= 1))
{
angry += 1;
}
else if((element.valence >= 0 && element.valence < 0.33) &&
(element.energy > 0.5 && element.energy <= 0.75))
{
nervous += 1;
}
else if((element.valence >= 0 && element.valence < 0.33) &&
(element.energy > 0.25 && element.energy <= 0.5))
{
bored += 1;
}
});
// ahora que ya tengo los valores modificados, puedo hacer el return
return {
angry: angry,
nervous: nervous,
bored: bored,
};
})
.catch(error => {
console.log('Hubo un error en la Promesa');
throw error;
});
}
// como resurceData devuelve una promesa, los datos sólo los puedo leer dentro del método `then()`
resourceData(userMood, songs, token)
.then(mood => {
console.log(`Angry: ${mood.angry}`);
console.log(`Nervous: ${mood.nervous}`);
console.log(`Bored: ${mood.bored}`);
})
.catch(error => {
console.error(error.message);
});
Espero que esto aclare tu duda y te ayude a resolver el problema.
console.log
en cada momento que incrementas y uno antes delreturn
; así te percataras si lo que ocurre es por que lo asíncrono es que esta causando ese efecto.; es decir antes de concluir elforEach
veas si todo concluye antes delreturn
.console.log
antes delreturn
los valores de las variables que cambiaron dentro delforEach
desaparecen, pero cuando comento el código asíncrono y hagoconsole.log
antes delreturn
los valores aparecen correctamente.