Estoy ejecutando esta función asíncrona en mi aplicación React:
const getMetaData = async (hashes: any) => { console.log({ hashes }); try { const data = hashes.map(async (hash: any) => { const url = `http://localhost:3003/user/pinata/getmetadata/${hash}`; const metadata = await axios.get(url); return metadata.data.response; }); console.log("data1", data); const metadata = await Promise.all(data); console.log('data2', metadata); } catch (error) { console.log('getMetaData Error', error); } }; console.log("data1", data) me da -
data1 (12) [Promesa, promesa, promesa, promesa, promesa, promesa, promesa, promesa, promesa, promesa, promesa, promesa]
El problema aquí es que después de hacer await Promise.all(data) no obtengo data2 en ninguna parte de la consola. ¿Quizás porque las Promesas ni siquiera se están resolviendo?
¿Alguna idea de lo que podría estar mal?
Gracias por adelantado.
Parece que su código funciona bien cuando usa la API SWAPI , por lo que puede ser que la API que usa no entregue los datos de manera adecuada. Ejecuto el siguiente código para probar. Aquí hay un enlace a codebox para jugar con él si quieres.
import axios from "axios"; const data = ["people", "planets", "starships"]; const getMetaData = async (hashes) => { console.log({ hashes }); try { const data = hashes.map(async (hash) => { const url = `https://swapi.dev/api/${hash}`; const metadata = await axios.get(url); return metadata.data.results; }); console.log("data1", data); const metadata = await Promise.all(data); console.log("data2", metadata); } catch (error) { console.log("getMetaData Error", error); } }; getMetaData(data);Con este código, parece que la situación más probable es que una de las promesas en el ciclo no se resuelva o rechace. Para confirmarlo, puede registrar todas las rutas posibles con un manejo de errores más local para que pueda ver exactamente qué sucede con cada solicitud. También agregué un tiempo de espera a la solicitud para que definitivamente pueda averiguar si simplemente no está dando una respuesta, pero también puede ver eso con solo mirar el inicio y el final de registro de cada solicitud en el ciclo:
function delay(msg, t) { return new Promise((resolve, reject)) => { setTimeout(() => { reject(new Error(msg)); }), t); }); } const getMetaData = async (hashes: any) => { console.log({ hashes }); try { const data = hashes.map(async (hash: any, index: number) => { try { console.log(`Request: ${index}, hash: ${hash}`); const url = `http://localhost:3003/user/pinata/getmetadata/${hash}`; const metadata = await axios.get(url); console.log(`Request: ${index}, result: ${metadata.data.response}`); return metadata.data.response; } catch (e) { console.log(`Request: ${index} error: `, e); throw e; } }); console.log("data1", data); const metadata = await Promise.all(data.map((p: any, index: number) => { return Promise.race(p, delay(`Timeout on request #${index}`, 5000)); }); console.log('data2', metadata); } catch (error) { console.log('getMetaData Error', error); } };Para su información, realmente no conozco la sintaxis de Typescript, así que si he cometido algún error de Typescript aquí, con suerte puede ver la idea general y corregir la sintaxis.