Question

我们的团队正在开发一个webapp / game，如果条件为真，我们希望每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）。

有没有人知道我们做错了什么？（或者，如果我们试图做的甚至可能？）

Answer 1

没有冒犯，但我认为如果你试图通过 const timer = await 8 来设置定时器，你可能会误解async等待是如何工作的。您可能想要阅读一些描述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调用。您可以使用此示例来查看在条件为true时如何将计时器设置为状态，并在计算结果为false时清除状态间隔。单击“启用”按钮并单击“禁用”按钮后，请务必在下面的Codepen示例中查看控制台。＆＃34;你好＆＃34;单击禁用按钮后，将每8秒停止打印一次。

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

React - 异步后台API调用

1 个答案: