每隔一段时间进行 Api 调用

Question

请原谅我的菜鸟问题，我是 react 新手。
我有多个组件，其中一些组件会定期调用 Api 以使列表保持最新。

在 Angular 中，我可以使用 requestAnimationFrame 创建一个服务以间隔广播事件，并在这些事件中进行 Api 调用。这是个好主意，因为：

• 我们不会在许多组件中创建很多间隔，保持干燥。
• 我们正在降低非破坏区间的风险。
• 当应用程序不在活动选项卡中时，我们会保存 Api 调用。
• 我们可以在单个服务中控制 Api 调用的速率。

还有其他一些优点。

在像this 这样的许多情况下，我读到这不是在 react/redux 中做同样事情的好方法，我们最好尝试将动作调度保持在最低限度。但如果我在每个组件中创建一个间隔，它就不再是 DRY 了。

我的问题是我应该选择其中一种方法还是有其他方法？

Answer 1

你可以使用 reacts componentDidMount()，它非常简单地设置一个时间间隔并进行 api 调用，虽然不太推荐，但你可以将它用于测试目的，例如。

componentDidMount() {
    this.myInterval = setInterval(() => {

        const { seconds} = this.state

        if ( seconds> 0 ) {
            this.setState(({ seconds }) => ({
                seconds: seconds -1
            }))
        } else if (seconds==0) {
            return(this.color('#840000'))
        }
    }, 1000) 
    Axios.get('https://jsonplaceholder.typicode.com/users')
  .then(response => {
      console.log(response);
      this.setState({ items: response.data.result.items});
  })
  .catch(error => {
    console.log(error);
  });
}