从 twitch 中只获取一次数据 API

Question

我需要向 twitch 发送 3 个请求 API（获取有关直播、主播和游戏的信息）。我不能一次性完成，因为实时数据尚不能用于获取其他数据。如何在不需要刷新服务器（并重新获取）2 次的情况下做到这一点？

我想重新创建 twitch 缩略图（img，游戏名称，...）为了获取流媒体和游戏，我首先需要实时数据。我在充值的时候，推流数据获取成功，但是主播和游戏的数据都是空的。

我尝试先在 created() 中获取实时数据，然后在 mounted() 中获取流媒体和游戏数据，但我需要 2 或 3 次刷新才能成功获取所有数据

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  name: "Streamers",
  methods: {
    ...mapActions(["fetchLive", "fetchInfoGame", "fetchInfoStreamer"])
  },
  created() {
   // this fetch data form the twitch APi for catch the live and store in an 
   // array == Live [{game: null, streamer: null, live:[array of data]}]
    this.fetchLive();
  },
  mounted() {
   //For all the live in the array, this fetch the data about the game and the 
   // streamer
   // first try [{game: null, streamer: null, live:[array of data]}
   // after refresh the dev server 
   // [{game: [array of data], streamer: [array of data], live:[array of data]}]

    this.fetchInfoGame();
    this.fetchInfoStreamer();
  }
};
</script>

我希望只获取一次所有数据

Answer 1

mounted 和 created 不会等待您的异步抓取调用。有两种解决方法：

解决方案一：

我假设 this.fetchLive() 会 return 一个承诺

data() {
  return {
    this.fetchLivePromise = null
  }
}
created() {
  this.fetchLivePromise = this.fetchLive();
},
mounted() {
  this.fetchLivePromise.then(() => {
    this.fetchInfoGame();
    this.fetchInfoStreamer();
  })
},

解决方案 2

我假设 this.fetchLive() 将在 vuex 中设置状态 liveArray，然后您可以在它可用时观察它的值

computed: {
  ...mapState(['liveArray']),
},
watch: {
  liveArray: function(newVal) {
    if (newVal && newVal.length > 0) {
      this.fetchInfoGame();
      this.fetchInfoStreamer();
    }
  }
}

从 twitch 中只获取一次数据 API

Fetch only once data from twitch API

fetch

twitch

vue.js

vuex

twitch-api