如何重构这一系列API调用以更快地执行？
如何重构这一系列API调用以更快地执行？
提问于 2022-07-15 11:48:20
为了呈现供用户选择的图像块网格，我需要进行一系列API调用。现在加载页面需要3-5秒，我认为这是因为我意外地添加了一些额外的循环，但是我很难辨别浪费掉的错误在哪里。从技术上讲，这是一个关于NFT数据的问题，但问题是算法与密码无关。
呼叫顺序是：
这是我的代码(除非没有与钱包相关的资产)，但速度非常慢。我相信有更好的方法来处理这件事，但我很想知道怎么做。耽误您时间，实在对不起!
// 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]);回答 1
Stack Overflow用户
发布于 2022-07-15 13:03:53
getRender按顺序获取数据项。您应该使用Promise.all或Promise.allSettled并行地这样做.
function fetchItem(item) {
const res = await fetch(item.url);
return res.json();
}
await Promise.all[...data.map(fetchItem)]页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72993510
复制相关文章
相似问题
腾讯云开发者
