0

所以我试图通过惯性vue和axios延迟加载无限滚动的文章，后端是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尽管每次运行循环时都会记录它。我已经向朋友展示了这个，他也无法修复它。这种行为对我来说似乎很奇怪，我不知道我应该怎么做，因为我对 vue 非常缺乏经验。

谢谢您的帮助。

4

1 回答 1

0

可能是并发的事情。请记住，axios 调用是异步的，因此循环将在收到响应之前继续。

所以可能是同时收到了许多响​​应，loaded那时仍然是 0。看起来情况不会如此。显然JavaScript 会一个接一个地处理回调。

我不确定 JavaScript 如何处理并发增量，所以我无法准确解释它是如何在这里发挥作用的。

从您的实现来看，您似乎希望将load函数转换为异步函数（使用async）关键字，然后await在 axios 调用之前使用 以确保在发出另一个请求之前您已收到响应。

为了感兴趣，也许看看您的网络选项卡并计算正在发出的请求数。我怀疑提出的请求会比this.article_count.

于 2020-01-10T11:52:14.273 回答