@krispey15

Отмененный запрос на бекенд через vue axios все равно грузит последующие запросы?

Есть метод, которые отсылает на бекенд запрос, а в ответ приходят данные которые потом появляются на фронте. Проблема в том, что если пользователь на сайте много раз вызовет данный метод, то появится куча запросов на бек, и в итоге на всех их нужно будет ждать ответ, что очень долго. Было решение отменять предыдущий запрос, если сделан новый, но к сожалению - если запрос отменен (во вкладке NetWork на запросе показывается статус - (canceled)) - то почему-то все равно, чтобы выполнился последний запрос, нужно подождать пока отрендерятся предыдущие (даже если они отменены), и в итоге например если будет отправлено 10 запросов - 9 отменятся, и останется последний, но в итоге он может рендериться около секунд 30, а если один запрос отправить, то он будет рендериться секунд 5.

Как можно сделать чтобы отмененные запросы не рендерились и чтобы последний запрос не ждал ответа предыдущих?

Скриншот отмены предыдущих запросов:

62b726b110e8d480112207.png
Сам код метода:

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)
                });
            },
  • Вопрос задан
  • 151 просмотр
Пригласить эксперта
Ответы на вопрос 1
Geminix
@Geminix
Фуллстек nuxt, .net разработчик
В catch ошибка попадает? Как вызывается метод?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы