响应大小受限时如何获取更多 API 记录

Question

我对 React 或 JavaScript 没有太多经验。我正在创建一个从 API 获取时间序列数据的简单应用程序。数据用于绘制折线图（React Apex Chart）。都很好。

问题在于 API 响应大小被限制为最多 2,000 条记录，有时我们需要更多数据。

API 文档说：

响应大小限制为最多 2,000 条记录。如果必须返回更多记录，则响应标头包含一个带有 URI 的 Link 标头以获取下一组记录：

链接：https://apiurl; rel="下一个"

我的获取码：

我的代码获取 api 数据，对其进行排序并将其发送到子组件（图表）。

  FetchAPI(){
    fetch(https://MYURLHERE?from=FROMDATE&to=TODATE)
      .then(response => response.json())
      .then(data => this.setState({ 
        kWhData: data.map((kWh) => kWh._kWh),
        TimeStampData: data.map((time) => time._time),
        loading: false
      }))
      .catch(error => console.log('Fetching failed', error))
  }

Link header: link →<https://MYURLHERE?from=FROMDATE&limit=2000&to=TODATE>; rel="next">

我知道解决方案可能是某种分页，但我不完全理解这个概念。我已经搜索了类似的问题，但没有运气。

希望有人可以为我提供帮助、提示或代码。

Answer 1

谢谢大家。我得到了这两种答案的混合使用。

我不知道这是一个好方法还是“正确”的方法。也许你们可以给我一些反馈？

setTimeout 只是为了测试，但我认为我需要至少 1000？

凭据/标头是获取 API 所必需的。

FetchAPI(requestURL) {
    fetch(requestURL, {
        credentials: 'include',
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json",
                "x-xsrf-token": this.myXRSFToken,
                "origin": `${window.location.protocol}//${window.location.host}`
            }
        })
    .then(response => {
        let Responseheader = response.headers.get('Link')
        response.json()
        .then(data => this.setState({
            TestData: this.state.TestData.concat(data)
        }))
        if (Responseheader){
            let nextPageUrl = Responseheader.match(/\bhttps?:\/\/\S+Z/gi)
            setTimeout(() => {
                this.FetchAPI(nextPageUrl)
            }, 2000);
        } else {
            console.log('Done fetching API')
            this.setState({ 
                loading: false
            })
            return
          }  
    })
    .catch(error => console.log('Fetching failed', error))
}

Answer 2

如果我正确理解了这个问题，我会在您的 FetchApi 函数中添加一个变量，以便它可以查询您的初始 API URL 或后续页面的 URL：

FetchAPI(requestURL){
    // Fetch function here
}

这个想法是，这个函数可以迭代地调用自己，将“下一页”结果的 url 作为每次调用的参数传递，直到响应表明所有数据都已检索。

所以您的初始调用将是 FetchAPI('https://MYURLHERE?from=FROMDATE&to=TODATE')。

然后，如果达到速率限制，您可以添加一行以再次调用此函数。例如：

FetchAPI(requestURL){
    fetch(requestURL)
        .then(response => {
            if(response.dataLimit == true){ // Or however this is expressed
                // Concat new data with any already retrieved
                this.FetchAPI(nextPageUrl) // Get the URL of the next page and call FetchAPI again with this e.g https://MYURLHERE?from=FROMDATE&limit=2000&to=TODATE
            } else {
                // Otherwise stop and do something else now that you have a complete set of data
            }
        })
}

值得一提的是，这是未经测试的代码，但希望足以理解原理。

如果 API 有请求速率限制，例如1 秒，您可以在函数再次调用自身之前添加延迟，但显然这会影响检索所有数据的总时间。

Answer 3

我不知道您使用的是什么 API，但听起来您需要做的就是从标头中获取下一组结果的 URL，然后向它发出请求。

在返回response.json() 之前，您可以使用response.headers.get() 访问标头。因此，您可以执行let nextPage = response.headers.get('Link') 之类的操作来获取完整的链接标头作为字符串。然后你可以在分号处拆分它，并将第一部分用作下一个分页请求的 URL。