Vue.jsでaxiosを使って取得したデータを自動で更新したい

Question

Vue.jsでSpotify APIを叩いてNowPlayingを取得するプロジェクトを作成中です。
ボタンを押すタイミングでNowPlayingを取得するところまではできたのですが、ボタンを押した後に毎秒データを取得し、表示を更新するようにしたいです。

<template>
//省略
    <button @click="getNowPlaying">再生中の曲情報取得</button>
    <div v-if="nowPlaying != null">
      <p>
        今再生中の曲 : {{ nowPlaying.item.artists[0].name }} の
        {{ nowPlaying.item.name }}
      </p>
      <img :src="nowPlaying.item.album.images[1].url" />
    </div>
//省略
</template>

<script>
import axios from "axios";
export default {
  data: function () {
    return {
      nowPlaying: null,
    };
  },
  props: {
    routeParams: Object,
  },
  created: function () {
    if (this.$route.hash) {
      this.$router.push(this.$route.fullPath.replace("#", "?"));
    }
  },
  methods: {
    spotifyLogin: function () {
      //省略
    },
    getNowPlaying: function () {
      let endpoint =
        "https://api.spotify.com/v1/me/player/currently-playing?market=JP";
      let data = {
        headers: {
          Authorization:
            this.routeParams.token_type + " " + this.routeParams.access_token,
        },
        data: {},
      };
      // setInterval(function () {
      console.log("da");
      axios
        .get(endpoint, data)
        .then((res) => {
          this.nowPlaying = res.data;
        })
        .catch((err) => {
          console.error(err);
        });
      // }, 1000);
    },
  },
};
</script>

setIntervalを使って繰り返しをしようと思ったのですが、繰り返しから抜け出す処理がないのかうまく行きませんでした。
何か参考になる情報があれば教えていただきたいです。

Comments

[plasticgrammer]

setIntervalで実現できそうですが、何かエラーなどが出たということでしょうか。
うまく行かなかったというコードを記載頂ければ、そこから原因と対策を考えられるかと思います。
可能でしたら追記をお願いします。

[asasaas]

setIntervalを挿入してみた箇所はコード内にコメントアウトで記載しております。
結果としては、ボタンを押してもアートワーク等が表示されないという状態でした。

Answer 1

GetNowPlayingを以下のように編集することで解決しました。

    getNowPlaying: function () {
      let endpoint =
        "https://api.spotify.com/v1/me/player/currently-playing?market=JP";
      let data = {
        headers: {
          Authorization:
            this.routeParams.token_type + " " + this.routeParams.access_token,
        },
        data: {},
      };
      let self = this;
      let fetchData = function () {
        axios
          .get(endpoint, data)
          .then((res) => {
            self.nowPlaying = res.data;
          })
          .catch((err) => {
            console.error(err);
          });
      };
      fetchData();
      setInterval(fetchData, 1000);
    },

Answer 2

データ取得部分を一旦関数宣言して、setIntervalに登録するとどうなるでしょうか。

  getNowPlaying: function () {
    let endpoint =
        "https://api.spotify.com/v1/me/player/currently-playing?market=JP";
    let data = {
      headers: {
        Authorization:
            this.routeParams.token_type + " " + this.routeParams.access_token,
      },
      data: {},
    };
    let fetchData = function () {
      console.log("da");
      axios
        .get(endpoint, data)
        .then((res) => {
          this.nowPlaying = res.data;
        })
        .catch((err) => {
          console.error(err);
        });
    };
    fetchData(); // 初回分は即実行
    setInterval(fetchData, 1000);
  },

Comments

[asasaas]

NowPlaying.vue?3d50:69 TypeError: Cannot set property 'nowPlaying' of undefined at eval
というエラーになりました。

[asasaas]

上記のエラーはthis.nowPlayingをself.nowPlayingに変更することで対応できました。
しかし、ボタンを押してもnowPlayingの情報が画面に表示されません。
fetchData内でconsole.log(self.nowPlaying);としたところ、コンソール内にはnowPlayingのデータが表示されたので、データの取得はできているようです。

[asasaas]

thisへのreference用変数としてselfを宣言することで解決しました。
最終的なコードは編集して記載しておきます。
ありがとうございました。