浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【react】プログレスバーをaxios通信が終わったタイミングで非表示にする

実現したかったこと

非同期通信が終了する際にloading(プログレスバー)を設け、通信に成功したタイミングで

loadingを非表示にする。

最終的なコード↓


constructor(props) {
    super(props);
    this.state = {
      loading: true,
    }

//ここで、コンストラクタの段階で表示されるようにしておく
内容は気にしなくても大丈夫です。

const response = axios.post('https://onesignal.com/api/v1/notifications', message, { headers: headers });

if(response != null){
  this.setState({ loading: false });
}

responseは非同期通信が成功して初めて値を格納するので

そのタイミングでloading処理を変更して上げればOK。

  • この記事いいね! (0)