从多个 API 页面获取数据答案

【问题标题】：Fetching data from multiples pages of API从多个 API 页面获取数据
【发布时间】：2020-08-11 21:05:28
【问题描述】：

我正在从 PS4 游戏 API 获取数据，但它被分成 400 多个页面。我想从所有页面中获取数据，但我想出的解决方案效果不佳。它给了我一个错误'NSNull 类型的JSON 值无法转换为有效的URL'。另外，我认为 for 循环也不能很好地工作，当它在我的列表中显示结果时，它显示它遍历了所有页面。

此外，此 API 是动态的，因为新游戏不断发布。那么，如何在不每次手动更改最后一页码的情况下将数据更新到最新页面呢？我在这里查看了一些问题，但无法将其放入我的代码中

我的代码比较长，所以我只发布重要的部分：

  componentDidMount() {

    var i;

    for (i = 0; i < 400; i++) {

      fetch(`https://api.rawg.io/api/games?page=${i+1}&platforms=18`, {
        "method": "GET",
        "headers": {
          "x-rapidapi-host": "rawg-video-games-database.p.rapidapi.com",
          "x-rapidapi-key": "495a18eab9msh50938d62f12fc40p1a3b83jsnac8ffeb4469f"
        }
      })
        .then(res => res.json())
        .then(json => {
          const { results: games } = json;
          this.setState({ games });
          //setting the data in the games state
        });
    }
  }

API 也有一个项目，它给了我下一页的链接，我认为有一种方法可以使用“next”并从该 URL 获取数据

如果有人可以提供帮助，那就太棒了。提前谢谢你

【问题讨论】：

标签： javascript reactjs react-native react-native-flatlist

【解决方案1】：

这是我在这个论坛上的第一个答案，所以...我希望对您有所帮助。对我来说，你有两个选择：每个请求在回答 count 和 next 中发送 2 个变量，或者您使用 count/20 创建一个 for 循环作为限制（20 是答案中给出的项目数），或者您进行 while 循环，直到 next 变量给出 null 作为答案（目前在第 249 页）。

【讨论】：

【解决方案2】：

当前发生的情况是您发出 400 个请求，当每个请求进入时，它都会用收到的响应覆盖组件。它不关心已经存在的内容或任何其他请求。

您可以尝试的一种方法是在响应出现时将结果附加到正在进行的列表中，并使用正在运行的列表更新状态。

关于处理新版本的其他问题。不要在每次使用应用程序时运行 400 次查询，而是尝试查看缓存结果。当应用程序加载时，您可以查看缓存是否存在，如果不存在则加载或查询。 rawg.io /games 端点有一个按版本排序的参数。当应用程序将来加载时，您可以有条件地循环，直到到达已经在缓存中的游戏，然后终止。

【讨论】：