0
325
Views¿Cómo obtener todos los datos con Promise.all en el gancho useEffect?
Tengo este enlace useEffect, que está tratando de obtener todos los datos a la vez
useEffect(() => { let promises = []; data.forEach(item => { promises.push(fetch(`https://app.subsocial.network/subid/api/v1/check/${(item.name).toLowerCase()}`)) }); Promise.all(promises) .then(response => response.map(item => item.json())) .then(data => console.log(data)) .catch(error => console.log(error)) }, [data]);Pero, en cambio, los datos tengo esto en la consola:
·
Santiago Gelvez
2 answers
Answer question0
El método json() devuelve una promesa.
Esto significa que usó Promise.all para esperar a que se resuelvan todas las promesas de respuesta, pero luego solo genera un nuevo grupo de promesas de análisis JSON en su lugar.
Genere las promesas de análisis JSON antes de usar Promise.all .
es decir
promises.push( fetch(`https://app.subsocial.network/subid/api/v1/check/${(item.name).toLowerCase()}`)) .then(response => response.json());
·
Santiago Gelvez
Report
0
Ya casi llega, solo necesita analizar cada promesa que obtiene la primera Promise.all
useEffect(() => { let promises = []; data.forEach((item) => { promises.push( fetch( `https://app.subsocial.network/subid/api/v1/check/${item.name.toLowerCase()}` ) ); }); Promise.all(promises) .then((responses) => { // Take all responses and analyze them with another Promise.all return Promise.all( responses.map((response) => { return response.json(); }) ); }) .then((data) => { // Extracted data console.log(data); }) .catch((error) => { // Catched errors console.log(error); }); }, [data]); En then método, obtiene todas las respuestas y las envuelve con otro Promise.all para que pueda extraer de ellas lo que reciben.
·
Santiago Gelvez
Report
Answer question