react.js+axios constructorで同期処理を行いたい

Question

react.jsの初回処理(constructor)で、
axiosでバックエンド(express)にリクエストを行い、
返り値をstateに入れるような処理を作成したいと思っています。

下記の様な書き方で同期処理を行いたいのですが、
非同期になってしまいます。
どうすれば同期処理になりますでしょうか。

constructor(props) {
  super(props);
  const main = () => {
    console.log('axios start');
    axios
    .get('http://localhost:3000/hogehoge')
    .then((res)=>{
      console.log('axios res');
      return res;
    })
    .catch((err)=>{
      console.log('axios null');
      return null;
    });
  }
  let res = main();
  console.log('axios end');
  this.state = {
    hoge:res
  }
}
...

理想：
axios start→axios res/null→axios end
実際：
axios start→axios end→axios res/null

await/async/promiseの把握のため一通り動かして把握し、
色々テストしたのですが、うまく動きませんでした。
まだ認識の抜けがあるのかもしれません...

ご教示のほどよろしくお願いいたします。

Answer 1

どうすれば同期処理になりますでしょうか。

無理です。非同期処理で問題なく動くように、帰ってきた結果をsetStateするような実装をするしかありません。

Comments

[aqaqsanba]

ありがとうございます。そのように実装してみます。