一部のコンテンツだけを再読み込みするページを実装した

前回までのあらすじ

DBから得たデータを表示するページに、定期的に最新の情報を取得しなおすように修正を加えています。
前回まででデータ取得をAPI化し、取得したデータをVueで扱いやすいように加工する処理を書いてました。
https://techblog.jasmine-s.com/chanchanrk-20200821-314

setIntervalで定期的に読み込む処理を書いた

こんな感じになりました。
readContentsがAPIを呼んでデータを取得する関数で、それをsetIntervalに渡しています。

var self = this;
setInterval(readContents, 30000, self);

setIntervalには注意点がある

setIntervalを使う場合には注意点がいくつかあるそうです。
・SPAでページ遷移後もsetIntervalが有効になってしまう
・ブラウザやタブが非表示の間にも定期実行されてしまう
・開発時にも定期実行されてしまう

今回はVueを特定のページにだけ適用していて、main.jsでVueのインスタンスを作ってページ間でVueを使い回す方法ではなかったためこれらを考慮するコードを書きませんでしたが、今後参考にしたいと思います。

【参考ページ】
Vue.jsで定期的にバックエンドと通信したいときに気にしたい3つのこと - プラグイン作成で解決
https://tech.smartcamp.co.jp/entry/2019/08/08/185351

UdemyでDockerの講座を買った

タイトルと関係ありませんが、Udemyの講座を買ったのでまた自宅でこつこつと講座をやってみます。
https://www.udemy.com/course/aidocker/

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

%d人のブロガーが「いいね」をつけました。