Estoy escribiendo una llamada a la API Express que hace uso de varias llamadas a la API de Axios dentro de sí misma y tengo problemas.
La idea es que la llamada Express API reciba un parámetro de consulta llamado "etiquetas" que puede contener desde una hasta infinitas etiquetas, cada una separada por una coma. Por ejemplo, la URL podría ser:
localhost:5000/api/stuff?tags=tecnología,historia,cultura,etc.
Pude dividir las etiquetas en una matriz en la que cada elemento es una etiqueta individual.
const theTags = req.query.tags; const tagsArray = theTags.split(",");Y esto me da una matriz que se vería así:
["tecnologia","historia","cultura","etc"]
Ahora aquí es donde me estoy atascando: tengo que revisar cada etiqueta en esa matriz y hacer una llamada Axios usando cada una. Mi pensamiento inicial fue que esto podría hacerse usando el método forEach. Dado que se supone que cada llamada a la API de Axios devuelve una matriz de datos que coincide con el contenido de la etiqueta, pensé que esta sería una buena manera de recopilar todos los resultados de cada llamada:
// Create a blank array outside of the forEach loop. const sumOfStuffArray = []; // Start the forEach loop. tagsArray.forEach( (element) => { // Make the API call for the current element const response = axios.get(`https://api.somewebsite.io/blahblah/stuff?tag=${element}`); // Pull the array from the data of the response const responseArray = response.data.stuff; // Do another forEach loop through the responseArray and... responseArray.forEach( (anotherElement) => { // ...push each element of the response array into the outside sumOfStuffArray sumOfStuffArray.push(anotherElement); } }Esto no ha funcionado, ya que cada vez que intento verificar la longitud de sumOfStuffArray después de que se supone que el método forEach ha terminado, regresa con una matriz vacía.
Estoy seguro de que esto se debe a que me falta algo con las declaraciones async/await o .then, ¡pero no puedo entender cómo hacer que funcione!
¿Alguien tiene alguna idea de lo que debo hacer para compilar todos estos elementos de matriz en una sola matriz?
Aquí hay 2 cosas:
axios.get es asíncrono, devuelve una promesa, por lo que debe esperar su respuesta antes de acceder con response.data.stuffforEach no admite asíncrono, solo ejecuta la devolución de llamada para cada elemento y no espera a que finalicen esas devoluciones de llamada, por lo que su matriz de resultados está vacía ya que axios.get aún no ha respondido. Puede intentar envolver su forEach en una Promesa para esperar a que se complete para verificar la matriz de resultados, y usar async/await para axios.get para esperar su respuesta:
// Create a blank array outside of the forEach loop. const sumOfStuffArray = []; const waitForEach = new Promise(resolve => { tagsArray.forEach(async (element, index, array) => { const response = await axios.get(`https://api.somewebsite.io/blahblah/stuff?tag=${element}`); const responseArray = response.data.stuff; responseArray.forEach( (anotherElement) => { sumOfStuffArray.push(anotherElement); } // check the forEach finish if (index === array.length - 1) { resolve(); } }); }).then(() => { console.log(sumOfStuffArray); }); O mejor, use Promise.all para tagsArray :
const tagsResponses = tagsArray.map(element => axios.get(`https://api.somewebsite.io/blahblah/stuff?tag=${element}`)); Promise.all(tagsResponses).then(responseArray => { responseArray.forEach(response => { sumOfStuffArray.push(response.data.stuff); } }).then(() => { console.log(sumOfStuffArray); });