Есть метод, которые отсылает на бекенд запрос, а в ответ приходят данные которые потом появляются на фронте. Проблема в том, что если пользователь на сайте много раз вызовет данный метод, то появится куча запросов на бек, и в итоге на всех их нужно будет ждать ответ, что очень долго. Было решение отменять предыдущий запрос, если сделан новый, но к сожалению - если запрос отменен (во вкладке NetWork на запросе показывается статус - (canceled)) - то почему-то все равно, чтобы выполнился последний запрос, нужно подождать пока отрендерятся предыдущие (даже если они отменены), и в итоге например если будет отправлено 10 запросов - 9 отменятся, и останется последний, но в итоге он может рендериться около секунд 30, а если один запрос отправить, то он будет рендериться секунд 5.
Как можно сделать чтобы отмененные запросы не рендерились и чтобы последний запрос не ждал ответа предыдущих?
Скриншот отмены предыдущих запросов:
Сам код метода:
getSchedules(locationId, gameModeId, selectedHeadsets, day) {
if (this.closeLastToken) {
this.closeLastToken.cancel();
}
this.closeLastToken = axios.CancelToken.source();
let param = 'locationId=' + locationId + '&gameModeId=' + gameModeId + '&headsets=' + selectedHeadsets
if (day)
param += '&day=' + day;
return axios({
method: 'get',
url: '/schedules?' + param,
cancelToken: this.closeLastToken.token
}).then((response) => {
this.schedules = response.data.schedules;
this.firstDateWeek = response.data.firstDateWeek;
this.backDateWeek = response.data.backDateWeek;
this.nextDateWeek = response.data.nextDateWeek;
this.isAuth = response.data.auth;
this.requestPhone = response.data.requestPhone;
this.showDay = response.data.currentDay;
this.weeks = response.data.weeks;
this.selectedWeek = response.data.currentWeek;
this.account = response.data.account;
this.curDateEvent = response.data.cur_day
if(this.curDateEvent){
this.changeMobileDay(this.curDateEvent);
}
if(response.data.showDayUniq){
this.curDateEvent = response.data.showDayUniq;
}
setTimeout(() => {
this.scrollStep('stepView4', -50, -120);
}, 100)
}).catch((error) => {
console.log(error)
});
},
