如何解决反应依赖 API 调用
请原谅我缺乏理解,假设我有以下结构的 gists 数组:
{
"description": 3,"id": 123456,"forks_url": "https:api.github.com..."
}
我需要获取用户的要点列表,还要查询要呈现的每个要点的分叉。我如何才能使用 Promise.all
或任何其他可能有帮助的库进行最少数量的异步 api 调用
我的意思是,我现在每次都获取 gists
并查询 forks
使其正常工作,但它进行了大量我想避免的 API 调用。
const GistData = ({ username }) => {
React.useEffect(() => {
if (!username) {
return;
}
setState({ status: 'pending' })
octokit.request(`GET /users/${username}/gists`,username)
.then(
gists => {
setState({ gists: gists.data,status: 'resolved' })
},error => {
setState({ error,status: 'rejected' })
}
);
},[username]);
if (status === 'resolved') {
return gists.map(
gist => <GistCard key={gist.id} gist={gist} username={username} />
)
} else {
throw error
}
}
export default GistData
const GistCard = ({ gist,username }) => {
React.useEffect(() => {
if (!id) {
return;
}
setState({ status: 'pending' });
octokit.request(`GET /gists/${id}/forks`,id).then(
(forks) => {
setState({ forks: forks.data,status: 'resolved' });
},(error) => {
setState({ status: 'rejected',error });
}
);
},[id]);
if (status === 'resolved') {
return (
<div className="gist">
<p>{description}</p>}
<Tags fileList={files} />
{forks.length > 0 && (
<div>
<h3>Forks: ({forks.length})</h3>
{forks.map((fork) => (
<Fork key={fork.id} fork={fork} />
))}
</div>
)}
</div>
);
} else {
throw error
}
};
export default GistCard;
解决方法
在我看来,这是一个后端问题。
以数据的方式,前端不可能创建Promise.All
,因为您将需要初始调用来获取 Gist 列表。在技术上获得要点列表后,您可以执行 Promise.All
,但调用量与您当前的调用量相同。
好吧,我猜你的意思是每次获得要点信息时都进行 get 。为此,您可以联系.then
。
.then(gists => {
setState({ gists: gists.data,status: 'resolved' })
},error => {
setState({ error,status: 'rejected' })
}
return gists.data
).then(data => call fetch fork by each gist);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。