Question

我需要对twitch API进行3个请求（获取有关直播，流媒体和游戏的信息）。我无法做到这一点，因为实时数据还无法用于获取其他数据。无需刷新服务器2次（并重新获取），怎么办？

我想重新创建抽搐缩略图（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不会等待您的异步提取调用。有两种解决方法：

解决方案1：

我假设this.fetchLive()将返回一个承诺

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仅获取一次数据

1 个答案: