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:
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]);
getRender obtiene elementos de datos secuencialmente. Deberías hacerlo en paralelo usando Promise.all o Promise.allSettled Algo como esto...
function fetchItem(item) { const res = await fetch(item.url); return res.json(); } await Promise.all[...data.map(fetchItem)]