axios 随机请求数

IT技术 javascript reactjs http react-native axios
2021-05-11 09:47:37

我需要用 Axios 发出多个请求，但我不知道有多少，请求的数量是完全随机的，可能是 0 或 1 或 9182379，完成后我需要做一些事情，好像现在我必须更新我的状态（对象数组）。

你知道我该怎么做吗？？

let oldTickets = [...this.state.playedTickets];
let length = oldTickets.length;
let newTickets = [];

for (let index = 0; index < length; index++) {
  let currentTicket = oldTickets[index];

  // just imported function that returns axios.get call
  checkTickets(currentTicket.ticketNumber)
    .then(data => {

      let newTicket = {
        bla: bla
      }

      newTickets.push(newTicket);
      this.setState({playedTickets: newTickets})

    })
    .catch(err => {
      console.log(err);
    })

}

这工作正常，但我知道它不好，所以我正在寻找更好的解决方案！

1个回答

在他们都做完之后我需要做点什么

您可以将数组映射到Promise并使用Promise.all：

Promise.all( // executes all requests in parallel
  this.state.playedTickets.map(({ ticketNumber }) => checkTickets(ticketNumber))
).then(playedTickets => { // or declare function as `async` and use `await`
  // executed only after all requests resolved
  console.log('tickets', playedTickets); 
  this.setState({ playedTickets });
}).catch(e => console.log(e)); // executed as soon as one request fails

编辑：

即使某些请求失败，也继续等待所有请求，并根据成功请求的结果设置状态

要实现这一点，只需在传递给之前捕获错误Promise.all：

Promise.all(
  this.state.playedTickets.map(({ ticketNumber }) =>
    checkTickets(ticketNumber).catch(console.log)
  )
).then(playedTickets => {
  console.log('tickets', playedTickets);
  this.setState({ playedTickets });
});

失败的请求将undefined作为数组中的值。
如果需要，您可以使用以下命令过滤掉它们

const validTickets = playedTickets.filter(ticket => ticket !== undefined)
其它你可能感兴趣的问题
上一篇如何在固定时间段内平滑地为 Material UI LinearProgress 设置动画？ 下一篇如何在主题覆盖中覆盖用于react的材料 ui 的选定颜色