javascript - React - 异步后台 API 调用

Question

我们的团队正在开发一个网络应用程序/游戏，如果条件为真，我们希望每 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(或调试控制台.log)没有运行。

有没有人知道我们做错了什么？ (或者如果我们尝试做的事情是可能的？)

Answer 1

无意冒犯，但我认为如果您尝试通过 const timer = await 8 设置计时器，您可能会误解 async await 的工作原理。您可能想阅读一些准确描述 Async Await 返回给您的内容的文章。

然而，设置一个函数在定时器上调用实际上有点混淆 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')
)

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

包含 Codepen例如，将进一步帮助您。有任何问题，请提出!