1

Estoy intentando crear un arreglo con map, y por cada iteración necesito traer información con get axios, pero la variable de nuevo arreglo al finalizar el map me trae los elementos como undefined.

let nuevo_arreglo = main_res.results.map( item => {
  axios.get(url).then(res => {
  return res
 })
});

Hay alguna forma de hacer que guarde el arreglo correctamente, soy nuevo en javascript.

1
  • Tu problema está en el manejo de la asincronía. Las peticiones de axios no se resolverán de forma síncrona, por lo cual al momento en que intentas usar tu variable, la misma no contiene la data que crees que debe contener. el 1 nov. 2021 a las 8:38

1 respuesta 1

2

PROBLEMA

Tal como digo en mi comentario, tu problema (y siempre lo es) es de asincronía.

Si hacemos un ejercicio mental de lo que está sucediendo con tu código, tienes una lista (array) de ítems, y por cada uno de ellos realizas una petición tipo get usando axios, que es una librería http basada en Promesas. Esto significa que el resultado de dicha petición estará disponible en un momento futuro incierto, haciendo que la asignación del resultado del método map a tu variable nuevo_arreglo no tenga realmente los datos devueltos de dicha o dichas Promesas. Incluso si las mismas retornaran inmediatamente, el contenido de ellas sería un Objeto de tipo Promesa y no el resultado procesado de la misma.

SOLUCIÓN

Una posible solución es usar el método Promise.all para procesar el nuevo arreglo una vez que todas las Promesas del arreglo original hayan sido procesadas. Sin embargo, dado que Promise.all devuelve a su vez una Promesa, la forma correcta de seguir trabajando con el resultado de la misma es dentro del método then() de dicha Promesa.

// INCORRECTO
let nuevo_arreglo = main_res.results.map( item => {
  axios.get(url).then(res => {  // <= axios.get devuelve una Promesa
    return res;  // <= este return no devuelve nada a map, sino a la Promesa
  });
});

// CORRECTO
// Promise.all recibe como argumento un iterable cuyos elementos son Promesas
Promise.all(main_res.results.map( item => { return axios.get(url) }))
.then(nuevo_arreglo => {  // el resultado será un arreglo nuevo con los resultados de cada Promesa (siempre que todas hayan sido resueltas)
  nuevo_arreglo.forEach(result => {
    console.log(result.data);  // el resultado está en la propiedad data del objeto devuelto
  });
});

Podemos ver un ejemplo en funcionamiento, usando la API de randomuser.me, para procesar una lista de peticiones:

let items = [
  'https://randomuser.me/api/?inc=gender,name,nat&nat=US&results=1',
  'https://randomuser.me/api/?inc=gender,name,nat&nat=ES&results=1',
  'https://randomuser.me/api/?inc=gender,name,nat&nat=FR&results=1'
];

Promise.all(items.map(axios.get))
.then(nuevo_arreglo => {
  nuevo_arreglo.forEach(result => {
    console.log(result.data);
  });
});
.as-console-wrapper {
  min-height: 100%;
  top: 0;
}
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Otra forma de resolver el problema es usando async / await y un bucle for ... of. Pero para que esto funcione, tu código debe ser ejecutado en un entorno tipo async (nótese que he envuelto la función anónima entre paréntesis y al final he puesto doble paréntesis para indicar su ejecución: (func_anonima)()), por ejemplo:

let items = [
  'https://randomuser.me/api/?inc=gender,name,nat&nat=US&results=1',
  'https://randomuser.me/api/?inc=gender,name,nat&nat=ES&results=1',
  'https://randomuser.me/api/?inc=gender,name,nat&nat=FR&results=1'
];

// entorno async / await autoejecutado

(async () => {
  let nuevo_arreglo = [];
  // siempre que usamos async / await debemos usar try / catch para el manejo de Promesas
  try {
    for ( let item of items ) {
      let result = await axios.get(item);
      nuevo_arreglo.push(result.data);
    }
    console.log(nuevo_arreglo);
  }
  catch(e) {
    console.log(e.message);
  }
})();
.as-console-wrapper {
  min-height: 100%;
  top: 0;
}
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Espero que esto te ayude a resolver el problema.

Tu Respuesta

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

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