从API的多个页面获取数据

时间:2020-08-11 21:05:28

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

我正在从PS4 Games 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中还有一个项可以给我下一页的链接,我认为有一种方法可以使用“下一个”并从该URL提取数据

如果有人可以帮助,那就太好了。预先谢谢你

2 个答案:

答案 0 :(得分:0)

这是我在这个论坛上的第一个答案,所以...希望对您有所帮助。 对我来说,您有2种选择: 每个请求在答案 count next 中发送2个变量,或者您使用 count / 20进行 for 循环作为限制(答案中给出的项目数为20),或者您进行 while 循环,直到 next 变量给出 null 作为答案(当前位于第249页)。

答案 1 :(得分:0)

当前正在发生的是,您正在发出400个请求,每个请求进入时都会用收到的响应覆盖该组件。它不在乎已有的内容或其他任何请求。

您可以尝试的一种方法是,将响应添加到正在执行的列表中,然后使用正在运行的列表更新状态。

请继续,对于其他有关处理新版本的问题。不用每次使用该应用程序时都运行400个查询,而是尝试对结果进行缓存。应用加载后,您可以查看缓存是否存在,是否加载或查询缓存是否存在。 rawg.io /games端点具有用于按发布顺序排序的参数。将来当应用程序加载时,您可以有条件地循环播放,直到到达已经在缓存中的游戏,此时终止。