Vueで一定時間ごとにAPIを呼びたいのですが。。。

Question

あるVueのアプリケーションでログイン後50分ごとにAPIを呼ぶ様にしたいです。
例えば下記の様にsetIntervalで時間を測っても途中でリロードされたりするとまたカウントは最初に戻ってしまうと思います。

    const refresh = () => {
      // call api
    }

    onMounted(() => {
      setInterval(refresh, 3000000);
    })

この様な処理をする場合のベストプラクティスはどの様な形でしょうか？
ログイン時に現在時刻をブラウザに保存して、そこから１秒とかおきでタイマーを動かして現在時刻を確認、保存した時刻と比較して50分たっていたら実行、再度その時刻を保存する、などという流れにすればできなくは無い気がしますが、もっと良い方法などあれば教えていただきたいです。

Answer 1

localStorage(あるいはcookieに)発火させる予定時刻を保存して、
発火予定時刻 - 現在時刻の残り秒数(ms)をsetInterval()に仕掛けるのが良いと思います。
ページがリロードされたら、localStorageから予定時刻を取り出して、現在時刻と差を取って、setInterval()に仕掛け直せば、ご懸念の問題は回避可能かと思います。

Comments

[Hayato1201]

回答ありがとうございます！
>その間の時間をsetInterval()に仕掛ける
とありますが、何時に発火させるとか指定できるんでしたっけ？毎秒時間チェックするとかしか無いかと思っていましたが、、、

[hide5stm]

言葉足らずでした。
発火予定時刻 - 現在時刻の 計算をして、残り秒数(ms)をsetInterval()に仕掛ける
です。

[FKM]

横から失礼します。
せっかくVueを使うのならば、mountedプロパティに関数を組み込んだ方がいいですよ。mountedは
初期動作、DOM読み込み後のみルーチンを実行してくれますので。

[Hayato1201]

理解しました！ご回答ありがとうございました！
>mountedプロパティに関数を組み込んだ方がいい
上記 onMounted はVue3系で書いているのでmountedプロパティに書くのと同じ認識です！