如何使用 fetch 限制从 JSON 文件返回的数据量？

Question

我有这个返回 19 个建筑物名称的fetch语句，但我只想要 10 个； 以下是我尝试过的，但我仍然得到 19 个建筑物名称。

fetchBuildings(energyProgramId) {
  fetch(`http://localhost:1001/api/energyprograms/${energyProgramId}/buildings/?results=10`)
    .then(res => res.json())
    .then(json => {
      this.setState({
        isLoaded: true,
        buildings: json,
      })
    });
}

我需要添加一些额外的东西吗？

Answer 1

下面是一个例子：

1.fetch(' http://jsonplaceholder.typicode.com/posts/ ')

上面的 URL 给出了包含 100 个元素的对象数组，因为它最初是一个包含 100 个元素的数组。

2.fetch(' http://jsonplaceholder.typicode.com/posts/?_limit=10 ') 这个 URL 给出了包含 10 个元素的对象数组。

注意到区别了吗？

我只这样做了： ?_limit=10 ----> 添加任何数字来代替 10，希望你能得到想要的结果。

Answer 2

正如另一个答案已经指出的那样，最好/最正常的解决方案是在后端更改 API 返回数据的方式。 通常 REST API 支持查询参数，例如limit和start或page和resultsPerPage 。

如果这不可用 - 例如，当您获取外部资源时 - 静态文件服务器通常支持的替代方案，有时由 API 支持的是Range标头，它允许您仅检索资源的特定字节范围（请注意，在 API 支持的情况下，它仍然会在服务器上加载整个资源，但不会传输整个资源）。 一个带有 fetch 的例子看起来像

fetch('', { headers: { range: 'bytes=0-1000'} })

在 XML 或 JSON 资源上执行此操作时可能会有些困难，但对于例如 CSV 文件，这是理想的选择。

Answer 3

与fetch到XHR或axios或其他任何东西没有什么不同。 实际上，与react或angular或vue或其他任何东西都没有什么不同。

这是后端开发人员编写的 API，它基于REST API，因此当您将其称为GET或POST以及其他任何内容时，您只需获取后端开发人员设计的 JSON。 但

有一种新技术，名为GraphQL 。 您可以调用 API，然后您只需获取所需的 JSON。 此外，它必须在后端实现，但它是可能的。

Answer 4

它与 React 的关系并不密切。 如果您需要较少的数据，则必须在设置状态之前减少数据。

const reducedBuildings = [];

fetch(`http://localhost:1001/api/energyprograms/${energyProgramId}/buildings/?results=10`)
  .then(res => res.json())
  .then(json => {
    json.forEach(building => {
        if (reducedBuildings.length < 10) {
            reducedBuildings.push(building);
        }
    });
    this.setState({
      isLoaded: true,
      buildings: reducedBuildings,
    })
  });