1

我需要向 twitch API 发出 3 个请求（获取有关直播、流媒体和游戏的信息）。我不能一枪搞定，因为来自现场的数据还不能用于获取其他数据。如何在不需要刷新服务器（并重新获取）2 次的情况下做到这一点？

我想重新创建 twitch 缩略图（img，游戏名称，...）为了获取流媒体和游戏，我首先需要来自现场的数据。当我为我的网站充电时，来自流的数据已成功获取，但来自流媒体和游戏的数据为空。

我尝试先在 created() 中获取实时数据，然后在 mount() 中获取流媒体和游戏数据，但我需要 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>

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

4

1 回答 1

0

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

解决方案1：

我假设this.fetchLive()会返回一个 Promise

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

解决方案 2

我假设会在 vuex 中this.fetchLive()设置状态，然后你可以在它可用时查看它的值liveArray

computed: {
  ...mapState(['liveArray']),
},
watch: {
  liveArray: function(newVal) {
    if (newVal && newVal.length > 0) {
      this.fetchInfoGame();
      this.fetchInfoStreamer();
    }
  }
}
于 2019-05-24T02:04:18.240 回答