Tengo una serie de llamadas a la API que debo realizar para generar una cuadrícula de mosaicos de imágenes para que el usuario los seleccione. En este momento, la página tarda de 3 a 5 segundos en cargarse y creo que es porque accidentalmente agregué algunos bucles adicionales, pero estoy luchando por discernir dónde están los fracasos desperdiciados. Esta es técnicamente una pregunta sobre datos NFT, pero el problema es algorítmico, no relacionado con criptografía.

La secuencia de llamadas es:

1. Llame a la API "Wallet" para obtener todos los activos asociados con una dirección - API doc
2. En caso de éxito, llame a la API "Metadatos de activos" para obtener más información sobre cada documento de API de activos
3. Repita el paso 2 hasta que todos los activos tengan una respuesta de metadatos

Este es mi código que funciona (a menos que no haya activos asociados con una billetera), pero es muy lento. Estoy seguro de que hay una mejor manera de manejar esto, pero estoy luchando por ver cómo. ¡Gracias por tu tiempo!

 // API Request var myHeaders = new Headers(); myHeaders.append("X-API-Key", CENTER_API_KEY); //API Key in constants file var requestOptions = { method: 'GET', headers: myHeaders, redirect: 'follow' }; const [nftData, updatenftData] = useState(); const [apiState, updateapiState] = useState("init"); const [renderNFT, updaterenderNFT] = useState([]); useEffect(() => { const getData = async () => { let resp = await fetch(walletAPICall, requestOptions); let json = await resp.json() updatenftData(json.items); updateapiState("walletSuccess"); } const getRender = async () => { let nftTemp = []; for (let i=0;i<nftData.length;i++) { let tempAddress = nftData[i].address; let tempTokenId = nftData[i].tokenId; let resp = await fetch(`https://api.center.dev/v1/ethereum-mainnet/${tempAddress}/${tempTokenId}`, requestOptions) let json = await resp.json() // console.log(json); nftTemp.push(json); } updaterenderNFT(nftTemp); updateapiState("NftDataSuccess"); } if (apiState=="init") { getData(); } else if (apiState=="walletSuccess") { getRender(); } }, [requestOptions]);