Javascript 反应相关API调用

请原谅我的理解不足，假设我有具有以下结构的gists数组：

{
     "description": 3,
     "id": 123456, 
     "forks_url": "https:api.github.com..."
}

我需要为用户获取gist列表，但也需要查询要呈现的每个要点的分支。如何使异步api调用的数量最少，并且可能有

Promise.all

或任何其他可能有帮助的库

我的意思是，我现在可以使用它来获取

gist

并每次查询

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 GistData=（{username}）=>{
React.useffect（（）=>{
如果（！用户名）{
返回；
}
setState（{status:'pending'}）
请求（`GET/users/${username}/gists`，username）
.那么(
gists=>{
setState（{gists:gists.data，状态：'resolved'}）
},
错误=>{
setState（{错误，状态：'已拒绝'}）
}
);
}，[用户名]；
如果（状态==‘已解决’）{
返回gists.map(
要点=>
)
}否则{
抛出错误
}
}
导出默认GistData

constgistcard=（{gist，username}）=>{
React.useffect（（）=>{
如果（！id）{
返回；
}
setState（{status:'pending'}）；
request（`GET/gists/${id}/forks`，id）(
（叉子）=>{
setState（{forks:forks.data，状态：'resolved'}）；
},
（错误）=>{
setState（{状态：'已拒绝'，错误}）；
}
);
}，[id]）；
如果（状态==‘已解决’）{
返回(
{description}
}
{forks.length>0&&(
分叉：（{Forks.length}）
{forks.map（（fork）=>(
))}
)}
);
}否则{
抛出错误
}
};
导出默认GistCard；

在我看来，这是一个后端问题

以数据的方式，前端不可能创建一个

承诺.All

，因为您需要初始调用来获取要点列表。在掌握了gist列表后，您可以执行

承诺。所有

，但通话量与您当前的通话量相同

好吧，我猜你是想在每次你得到要点信息时都能得到答案。为此，您可以联系

。然后

.then(gists => {
 setState({ gists: gists.data, status: 'resolved' })
    },
    error => {
      setState({ error, status: 'rejected' })
    }
 return gists.data 
 ).then(data => call fetch fork by each gist);

---

是的，所以打一个电话来获取列表，但我的问题是在福克斯的电话中，它每个gist打一个电话。我想能够做的是获得每个要点的分叉，如果可用，然后在我从后端获得分叉后解决承诺。

.then(gists => {
 setState({ gists: gists.data, status: 'resolved' })
    },
    error => {
      setState({ error, status: 'rejected' })
    }
 return gists.data 
 ).then(data => call fetch fork by each gist);