Как в setInterval вызывать задержку следующего реста, пока не выполнится предыдущий?

Question

[anastasia__galkina]

Есть миксин, который отвечает за вызов реста каждый 1000мс

const freqUpdateInMs = 1000

export default {
  data() {
    return {
      loading: false,
      items: {},
      timer: null
    }
  },
  mounted() {
    this.$store.commit('setLoading', true)
    this.fetchData()
      .then(() => {
        this.timer = setInterval(this.fetchData.bind(this), freqUpdateInMs)
      })
      .finally(() => {
          this.$store.commit('setLoading', false)
      })
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}

Внутри компонента подключается этот миксин и вызывается в методах fetchData

methods:{
      fetchData(){
        this.loading=true;
        return DataApi.get(this.url)
        .then((data)=>{
          this.items=data;
          this.loading=false
        })
      },
}

Вопрос: как сделать так, чтобы следующий рест не вызывался, пока предыдущий не даст ответ. Сейчас из-за того, что ресты отвечают долго, образуется большая очередь

Comments

[Дмитрий Беляев]

а простой setTimeout не вариант использовать?
Ну то есть планировать следующий запрос, когда завершится предыдущий.

[anastasia__galkina]

Дмитрий Беляев, Я тоже о нем думала, но не понимаю, как его прикрутить

Answer 1

[Дмитрий Беляев]

const freqUpdateInMs = 1000

export default {
  data() {
    return {
      loading: false,
      items: {},
      timer: null
    }
  },
  mounted() {
    const fetchData = () => {
      this.$store.commit('setLoading', true)
      this.fetchData()
        .finally(() => {
          this.timer = setTimeout(fetchData, freqUpdateInMs)
          this.$store.commit('setLoading', false)
        })
    }
    fetchData()
  },
  beforeDestroy() {
    clearTimeout(this.timer)
  }
}

Comments

[anastasia__galkina]

Дмитрий Беляев, не могу победить одну проблемы в этом способе. У меня лоадер перестает крутиться раньше, чем ответ на запрос успевает придти. Пыталась this.$store.commit('setLoading', false) в такой же setTimeout оборачивать, но это не помогло

[Дмитрий Беляев]

anastasia__galkina, а на что у Вас завязан лоадер? Меня смущает наличие свойства loading в локальном состоянии, когда оно есть в сторе, может просто computed из стора прокинуть вместо локального свойства?

[anastasia__galkina]

Дмитрий Беляев, свойство лоадер заполняется внутри компонента. А что вы имеете ввиду под "computed из стора"?

[Дмитрий Беляев]

anastasia__galkina, вот тут стор меняется:
this.$store.commit('setLoading', false)