Vue значение данных не обновляется для использования в функции

Question

Так что я пытаюсь лениво загружать статьи с бесконечной прокруткой, с инерцией - vue и топором ios, бэкэнд - laravel 6.0. Так как я не хочу делать ненужный запрос, я даю общее количество статей для компонента. Я также отслеживаю количество уже загруженных статей в данных компонента.

props: {
    article_count: Number,
   },
data: function () {
    return {
        loaded: 0,
        scrolledToBottom: false,
        articles: [],
    }
},

Все загруженные статьи помещаются в articles, а scrolledToBottom отслеживает прокрутку пользователя ко дну. Я уже проверил, относится ли this к компоненту vue и имеет ли он свойства данных.

methods: {
    load: function (nextToLoad) {
        for (let i = nextToLoad; i < nextToLoad + 10; i++){
            if (this.loaded <= this.article_count){
                this.$axios.get(route('api_single_article', i))
                    .then(response => {
                        if (response.status == 200 && response.data != null) {
                            console.log(this.loaded);
                            this.articles.push(response.data);
                        }
                        this.loaded++;
                    })
                    .catch(error => {
                        if (error.response.status != 404) {
                            console.log(error);
                            console.log(this.loaded);
                            this.loaded++;
                        }
                    });
            }
        }
        console.log(this.loaded);
    },
    scroll: function () {
        window.onscroll = () => {
            let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;

            if (bottomOfWindow) {
                this.load(this.loaded + 1);
            }
        }
    }
}

Странная часть заключается в том, что если я зарегистрирую this.loaded в ответе / Функция стрелка ошибки всегда возвращает 0. Если я делаю это вне ответа, он также возвращает 0, но если я регистрирую this, свойство loaded имеет предполагаемое значение после того, как l oop пробежал, несмотря на то, что оно было зарегистрировано каждый раз, когда запускается l oop. Я уже показал это другу, и он также не мог это исправить. Поведение кажется мне странным, и я не знаю, как еще мне быть, так как я очень неопытен с vue.

Спасибо за помощь.

Answer 1

Может быть параллелизмом. Помните, что вызов ax ios является асинхронным, поэтому l oop будет продолжаться до получения ответов.

Таким образом, возможно, что многие ответы будут получены одновременно, и тогда loaded будет по-прежнему равным 0. Похоже, что это не так. Очевидно, JavaScript будет обрабатывать обратные вызовы один за другим.

Я не уверен, как JavaScript обрабатывает одновременные приращения, хотя я не могу точно объяснить, как это действует здесь.

Из вашей реализации, похоже, что вы захотите чтобы превратить функцию load в асинхронную функцию (используя ключевое слово async), а затем использовать await перед вызовом ax ios, чтобы убедиться, что вы получили ответ, прежде чем сделать другой запрос.

Ради интереса, возможно, посмотрите на вкладку вашей сети и посчитайте, сколько запросов делается. Я подозреваю, что будет сделано больше запросов, чем this.article_count.