Получать только один раз данные из API Twitch - PullRequest
Новая
       39

Получать только один раз данные из API Twitch

1 голос
/ 24 мая 2019

Мне нужно сделать 3 запроса к API дергания (получить информацию о прямом эфире, о стримере и игре). Я не могу сделать это одним выстрелом, потому что данные из живых еще не доступны для извлечения других данных. Как я могу сделать это без необходимости обновления сервера (и повторной загрузки) 2 раза?

Я хочу воссоздать миниатюру подергивания (img, название игры, ...). Для извлечения стримера и игры мне сначала понадобятся данные из прямой трансляции. Когда я загружаю свой сайт, данные из потока извлекаются успешно, но данные из стримера и игры равны нулю.

Я пытался сначала получить живые данные в созданной (), а затем стример и игровые данные в смонтированном (), но мне нужно 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>

Я ожидаю получить все данные только один раз

1 Ответ

0 голосов
/ 24 мая 2019

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() установит состояние liveArray в vuex, затем вы можете просмотреть значение, когда оно станет доступным 

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