Ссылочная функция Javascript из функции жирной стрелки или как запускать функцию каждые X секунд

Question

Я в основном занимаюсь Java, и делал это долгое время.

Но сейчас я пытаюсь сделать простой интерфейс с реакцией.

Но я не могу понять, как бы я вызывал функцию извне class Home extends Component

function queryJobTime () {

    console.log('activated');
    queryJob()
    console.log(active)
}

который находится за пределами

class Home extends Component {

   constructor(props) {
     super(props)
     this.state = {...}
   } 

   queryJob = () => { ..long axios method.. }

   ..many lines omitted...

   setInterval(function () { queryJobTime(); }, 60);

}

Если я удалю все строки, но console.log('activated');, он действительно будет постоянно активирован. Но это бесполезно, мне нужно запросить конечную точку и продолжить, если результаты будут доступны.

Итак, я хочу вызвать queryJob = () => {} (жирная стрелка axios что-то внутри класса Home) из функции queryJobTime ()

function queryJobTime()

должен запускать axios POST каждые X секунд, чтобы определить, завершена ли долго-долго-работающая серверная задача.

Answer 1

Создайте new Home (аргумент props требуется, только если queryJob требует props):

function queryJobTime() {
    console.log("activated");
    new Home("prop").queryJob();
    console.log(active");
}

Answer 2

Вы можете запустить queryJob в методе componentDidMount и использовать рекурсию с setTimeout, чтобы повторить вызов, пока обещание не будет выполнено.

DEMO

let completed = false;
setTimeout(() => completed = true, 3000);

function queryJobTime() {
  console.log('activated')
  return new Promise((resolve, reject) => {
    if (completed) resolve("Completed");
    else reject()
  })
}

class Home extends React.Component {
  state = {
    completed: false
  }

  componentDidMount = () => {
    this.queryJob()
  }

  queryJob = async() => {
    try {
      const res = await queryJobTime()
      this.setState({completed: true})
      console.log(res)
    } catch (err) {
      setTimeout(() => this.queryJob(), 300)
    } 
  }

  render() {
    if (this.state.completed) return <div> Completed </div>
    else return <div> Not Completed </div>
  }
}

ReactDOM.render( 
  <Home /> ,
  document.getElementById('container')
);