从 API 解析多个页面

Question

我正在尝试获取格式化为 JSON 的 eventbrite 的 API，问题是 JSON 只能有 50 个项目，这意味着 Json 没有所有信息。 所以在这里 https://www.eventbriteapi.com/v3/events/search/?token=XXX&location.address=Lodnon&page=1&expand=venue

这是 API，你可以看到这只是 page=1，它有 31 页 - 所以我需要 page =1 =2 =3 =4 ....=31

所以我厌倦了解析所有页面的数据，但它并不顺利

请检查我的代码

export default class Map extends React.Component {
gather(){
let requests = [];
for (let i=1; i<32; i++) {
requests.push(fetch('https://www.eventbriteapi.com/v3/events/search/?
location.address=glasgow&page='+i+'&token=XXX&expand=venue').then(r => 
r.json()));
}
Promise.all(requests).then((responses) => {
   let arr = [];
for (let response of responses) {
for (let event of response.events) {
    //console.log(event)
}

} }) .catch((error) => { console.error(error);

  });
}

 componentWillMount(){

  this.gather()
}
}

Answer 1

您可能应该尝试匹配分页而不是一次获取所有页面，但如果您真的需要这样做，我认为setState 多次这样做不是一个好主意 - 理想情况下您会最后发出所有请求和setState。像这样的：

将所有的请求打包成一个 Promise 数组：

let requests = [];
for (let i=0; i<32; i++) {
  requests.push(fetch('https://www.eventbriteapi.com/v3/events/search/?location.address=glasgow&page='+i+'&token=XXX&expand=venue').then(r => r.json()));
}

一次运行所有请求并等待它们全部完成，然后在所有请求完成后执行 setState：

Promise.all(requests).then((responses) => {
  let arr = [];
  for (let response of responses) {
    for (let event of response.events) {
      // extract the event info and add it to the individual arrays/items
      // ...

此外，不确定您的应用程序是如何使用这些数据的，但将其保存在一个对象中而不是为每个对象设置单独的数组可能更容易：

{
  name,
  latitude,
  longitude,
  url
}