反应依赖 API 调用

Question

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

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

我需要获取用户的 gist 列表，但还需要查询要呈现的每个 gist 的分支。 如何使用Promise.all或任何其他可能有帮助的库来使用最少数量的异步 api 调用

我的意思是，我现在让它工作，每次都获取要点并查询forks ，但它会进行很多gists调用，我想避免这些调用。

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;

Answer 1

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

以数据的方式，前端不可能创建Promise.All ，因为您需要初始调用才能获取 Gist 列表。 在技术上获得要点列表后，您可以执行Promise.All ，但与您目前正在执行的呼叫数量相同。

好吧，我想您的意思是每次获得要点信息时都进行获取。 为此，您可以联系.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);