Parece que no puedo entender cómo establecer el valor de una matriz dentro de un bucle ...
Como puede ver a continuación, recupero algunos valores de la base de datos y los reviso.
Lo que trato de hacer aquí se puede resumir aproximadamente en lo siguiente:
Luego trato de almacenar esos valores que obtengo pero no funciona.]
Cuando muestro lo que se envía a la matriz dentro de los bucles, parece funcionar (es decir, obtengo los valores que se deben recuperar). Sin embargo, cuando está fuera de los bucles, la matriz está completamente vacía...
Aquí el código, hasta ahora:
const request = async (pk) => { try { let singleDetail = []; const firstResponse = await axios.get( `http://localhost:8000/${pk}` ); firstResponse.data.map(async (book, idx) => { const booking = JSON.stringify(book.id); const secondResponse = await axios.get( `http://localhost:8000/${booking}` ); Object.keys(secondResponse.data).map(async (single) => { let course = JSON.stringify(secondResponse.data[single].courses); const thirdResponse = await axios.get( `http://localhost:8000/${course}` ); singleDetail.push( JSON.stringify({ booking: booking, single: JSON.stringify(secondResponse.data[single]), course: JSON.stringify(thirdResponse.data), }) ); }); }); console.log("SINGLEDETAILS " + JSON.stringify(singleDetail)); return singleDetail; } catch (error) { console.log(error); } };Según el ejemplo, el problema parece ser que no está esperando las funciones asíncronas de los mapas.
Sin esperar los resultados de firstResponse.data.map(async (book, idx) => {...}) , JS omitirá la espera de que se resuelvan las promesas y, por lo tanto, saltará directamente para return singleDetail;
Al usar await Promise.all(...) , le dice a JS que espere a que todas las promesas en la matriz tengan éxito antes de continuar.
Probar:
const request = async (pk) => { try { let singleDetail = []; const firstResponse = await axios.get( `http://localhost:8000/${pk}` ); await Promise.all(firstResponse.data.map(async (book, idx) => { const booking = JSON.stringify(book.id); const secondResponse = await axios.get( `http://localhost:8000/${booking}` ); await Promise.all(Object.keys(secondResponse.data).map(async (single) => { let course = JSON.stringify(secondResponse.data[single].courses); const thirdResponse = await axios.get( `http://localhost:8000/${course}` ); singleDetail.push( JSON.stringify({ booking: booking, single: JSON.stringify(secondResponse.data[single]), course: JSON.stringify(thirdResponse.data), }) ); })); })); console.log("SINGLEDETAILS " + JSON.stringify(singleDetail)); return singleDetail; } catch (error) { console.log(error); } };Si una sola solicitud de API falla, el intento/captura detectará el error y ninguna de las solicitudes de datos exitosas será de utilidad.
Si desea utilizar cualquier dato que pueda capturar (mientras que otras solicitudes en el bucle fallan), puede modificar el código para detectar errores después de cada solicitud.
Si hay muchas solicitudes en curso, es posible que desee utilizar algo como https://www.npmjs.com/package/p-map en lugar de await Promise.all(...) para reducir la cantidad de conexiones salientes.