Javascript React-异步后台API调用

我们的团队正在开发一个webapp/游戏，如果条件为真，我们希望每8秒调用一次API。 此过程由启动“填充”方法的按钮触发

async autoLoad() {
        const timer = await 8; 
        console.log('debug consolelog')           
        const result = await this.UpdateProfile();
    }

togglePopulate() {
        const status = this.state.autoLoad;
        if (status === true) {
            this.setState({ autoLoad: false });
        } else {
            this.setState({ autoLoad: true });
            this.autoLoad();
        }
    }

我们的理解是，这将每隔8秒在后台运行“UpdateProfile（）”函数。然而，结果是我们的整个网页被锁定，UpdateProfile（或debug console.log）没有运行

---

有人知道我们做错了什么吗？（或者如果我们试图做的事情是可能的？

恕我冒犯，但我认为如果您试图通过，const timer=wait 8设置计时器，您可能会误解async wait的工作原理。您可能想阅读一些文章，这些文章准确地描述了Async等待您返回的内容

然而，设置要在计时器上调用的函数实际上有点与React混淆。我觉得这更像是你的问题。我希望这个例子能帮助你

class Example extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      interval: null
    }
    this.enableAutoload = this.enableAutoload.bind(this)
    this.disableAutoload = this.disableAutoload.bind(this)
  }

  enableAutoload() {
    const setTimer = window.setInterval(() => {
                      this.iRunEveryEightSeconds()
                     }, 8000)
    this.setState({ interval: setTimer })
  }

  disableAutoload() {
    console.log('Clearing the timer from state...')
    const clearTimer = window.clearInterval(this.state.interval)
    this.setState({ interval: clearTimer })
  }

  iRunEveryEightSeconds() {
    console.log('Hello There.')
  }

  render() {
    return (
      <div className="example">
        Example API Call Every 8 Seconds

        <button onClick={this.enableAutoload} className="enable">
          Enable Autoload
        </button>

        <button onClick={this.disableAutoload} className="disable">
          Disable Autoload
        </button>
      </div>
    )
  }
}

ReactDOM.render (
  <Example />,
  document.querySelector('#app')
)

类示例扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
间隔：空
}
this.enableAutoload=this.enableAutoload.bind（this）
this.disableAutoload=this.disableAutoload.bind（this）
}
enableAutoload（）{
const setTimer=window.setInterval（（）=>{
this.iRunEveryEightSeconds（）
}, 8000)
this.setState（{interval:setTimer}）
}
disableAutoload（）{
log（'正在从状态中清除计时器…'）
const clearTimer=window.clearInterval（this.state.interval）
this.setState（{interval:clearTimer}）
}
iRunEveryEightSeconds（）{
log（'你好'）
}
render（）{
返回(
每8秒调用一次示例API
启用自动加载
禁用自动加载
)
}
}
ReactDOM.render(
,
document.querySelector（“#app”）
)

我知道您需要在满足特定条件时运行此API调用。您可以使用此示例了解如何在条件为true时将计时器设置为状态，并在其计算结果为false时清除状态中的间隔。确保在单击“启用”按钮后以及单击“禁用”按钮时，检查下面代码笔示例中的控制台。单击“禁用”按钮后，“你好”将每8秒停止打印一次

---

所包含的示例将进一步帮助您。有任何问题，请提问

这解决了我们的问题，使我们避免了更多令人沮丧的故障排除时间。谢谢你的帮助！没问题。很乐意帮忙（）