2

Tengo el siguiente código donde declaro unas variables (angry, nervous y bored) fuera de un forEach, dentro de el, incremento sus valores a partir de unas condiciones:

const resourceData = async (userMood, songs, accessToken) => {

    let angry = userMood.angry;
    let nervous = userMood.nervous;
    let bored = userMood.bored;

    songs.forEach(async song => {

        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();

        const x = response.valence;
        const y = response.energy;

        if((x >= 0 && x < 0.33) && (y > 0.75 && y <= 1))
            angry += 1; 
        else
            if((x >= 0 && x < 0.33) && (y > 0.5 && y <= 0.75))
                nervous += 1; 
            else
                if((x >= 0 && x < 0.33) && (y > 0.25 && y <= 0.5))
                    bored += 1; 
    });

    return {
        angry: angry,
        nervous: nervous,
        bored: bored,
    };
}

El problema es que cuando hago log de las variables dentro del forEach el cambio se nota en consola, pero al hacer el log fuera de este las variables aparecen con el valor inicial dado al principio de la función como si nunca hubiera cambiado su valor, ¿alguien sabe como puedo arreglar esto? Graciass!

2
  • 1
    Saludos. Te sugiero poner un console.log en cada momento que incrementas y uno antes del return; así te percataras si lo que ocurre es por que lo asíncrono es que esta causando ese efecto.; es decir antes de concluir el forEach veas si todo concluye antes del return. Commented el 26 jun. 2020 a las 16:57
  • @RobertoLeOr Hola!! parece que es por el código asíncrono, cuando lo dejo en el código y hago un console.log antes del return los valores de las variables que cambiaron dentro del forEach desaparecen, pero cuando comento el código asíncrono y hago console.log antes del return los valores aparecen correctamente. Commented el 26 jun. 2020 a las 18:04

2 respuestas 2

1

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.

0

Es porque el foreach crea una copia de la variable, haz los cambios sobre la variable original, te dejo dos ejemplos:

let numbers = [1, 2, 3, 4, 5];

numbers.forEach((number) => {
  //Se suma uno a cada elemento
  number += 1;
});
console.log(numbers); //El areglo queda igual

//EJEMPLO CORRECTO
numbers.forEach((item, index) => {
  numbers[index] += 1;
});
console.log(numbers); //El areglo ha cambiado

Como puedes ver dentro de un forEach el parámetro que se recibe sólo actúa dentro de el, si quieres modificar los valores puedes hacerlo como lo hice, o utilizar for, map, while, etc.

4
  • Gracias por responder!! En el código estoy accediendo a las variables originales, me refiero a las variables angry, nervous y bored, las cuales incremento dependiendo de una condición dentro del forEach, pero aún así su valor siempre es el inicial. Commented el 26 jun. 2020 a las 2:15
  • @AlejandroZapataMolina como ha dicho gerardo, es porque forEach crea una copia de cada elemento y la itera, cuando tu modificas algo del forEach estas modificando enrealidad la copia, porfavor leer mas detenidamente la respuesta.
    – Layer
    Commented el 26 jun. 2020 a las 4:12
  • @Riven Ok, según lo que dicen lo que entiendo es que en mi código dentro del forEach las variables angry, nervous y sad son copias de las mismas que están fuera del forEach declaradas al principio de la función resourceData, si este es el caso entonces ¿como puedo acceder a las variables originales dentro del forEach? Commented el 26 jun. 2020 a las 17:11
  • @AlejandroZapataMolina cuando usas let, limitas el uso a un único scope. Al entrar al foreach, tienes otro (porque no es una estructura de control sino una función ejecutándose sobre todos los elementos de una colección)
    – Alfabravo
    Commented el 26 jun. 2020 a las 17:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.