Vue+js как сделать чтобы axios выполнялся поочередно?

Question

[aheles]

Есть функция, которая отправляет axios:

getSchedules(locationId, gameModeId, selectedHeadsets, day) {

                let param = 'locationId=' + locationId + '&gameModeId=' + gameModeId + '&headsets=' + selectedHeadsets

                if (day)
                    param += '&day=' + day;

                return axios({
                    method: 'get',
                    url: 'schedules?' + param
                }).then((response) => {


                    if(this.curDateEvent){
                        this.changeMobileDay(this.curDateEvent);
                    }

                }).catch((error) => {

                });
            }

Проблема в том, что если пользователь много раз отправил запрос, то ему возвращаются данные которые прогружаются не поочередно, например, человек отправил 5 запросов сразу, но например последний запрос загрузится быстрее, чем четвертый запрос. Как сделать поочередность запросов?
Погуглил, узнал про async await, но так и не смог подставить это в функцию
Сам пример вызова этой функции:
this.getSchedules(this.selectedLocationId, this.selectedGameModeId, this.selectedHeadsets,day).then(()=>{
document.getElementById('stepView4').scrollIntoView({behavior:'smooth'});
});

Comments

[Aetae]

А тебе точно нужна очерёдность?
Обычно нужен один из двух вариантов:
1. Отправлять только первый вызов - остальные игнорировать пока он не пришёл.
2. Отменять предыдущий вызов если сделан следующий.

[aheles]

Aetae, да, нужен чтобы поочередно выполнялись, а не те которые быстрее загрузятся

[alaskafx]

aheles, асинхронность?

[aheles]

alaskafx, думаю да. Нужно чтобы запросы подгружались поочередно. Читал в гугле, что для этого нужна async + await

[Aetae]

aheles, нет, async + await - это если ты сам их поочерёдно отправляешь.
А тут тебе нужна очередь.

Answer 1

[Aetae]

Если это именно то, чего ты хочешь, то ты можешь сделать себе очередь, условно так:

class AsyncQueue {
  constructor(result) {
    this.queue = [];
    this.result = result;
  }
  isStreaming = false;
  add(promise) {
    this.queue.push(promise);
    if(!this.isStreaming)
      this.stream();
  }
  async stream() {
    this.isStreaming = true;
    for await (const result of this.queue) {
      this.result(result);
    }
    this.queue.length = 0;
    this.isStreaming = false;
  }
}

Vue:

data() {
  const schedulesQueue = new AsyncQueue(this.showLoadedSchedules);
  return {
    schedulesQueue,
    // ...
  }
},

methods: {
  showLoadedSchedules(response) {
    if(this.curDateEvent) {
      this.changeMobileDay(this.curDateEvent);
    }
    // ...
  },
  addSchedulesToQueue(locationId, gameModeId, selectedHeadsets, day) {
    let param = 'locationId=' + locationId + '&gameModeId=' + gameModeId + '&headsets=' + selectedHeadsets

    if (day)
      param += '&day=' + day;

    return this.schedulesQueue.add(
      axios({
        method: 'get',
        url: 'schedules?' + param
      }).catch((error) => {})
    );
  }
}