延迟加载函数中的 API 调用，限制 api 响应答案

【问题标题】：API call in lazy-load function, limiting the api response延迟加载函数中的 API 调用，限制 api 响应
【发布时间】：2019-08-30 08:19:51
【问题描述】：

我已经建立了一个项目，我将 API 响应限制为 5，并且在滚动到页面底部时，我进行了一个新的 API 调用以获取 API 中的下两个项目。但是对于当前的代码，它只检查之前提取的 5 个项目是否存在于卡片状态中。我很不确定如何在 API 中获取下两个项目？有人对如何解决这个问题有任何建议吗？谢谢，

var app = new Vue({
el: '#app',
data: {
    cards: []
},
methods: {
    scroll(card) {
        window.onscroll = () => {
            let bottomOfWindow = document.documentElement.scrollTop + 
            window.innerHeight === document.documentElement.offsetHeight;
            if(bottomOfWindow) {
            const url = 
            'https://api.jsonbin.io/b/5cab36508b8d1301a25bd8fa/1/';
                axios.get(url)
               .then(response => {
               for (var i = 0; i < this.cards.length; i++) {
                            console.log('Cards id: ', this.cards[i].id)
                            if(this.cards[i].id !== 
                            response.data.results[i].id){            
                                for (var x = 0; x < 2; x++) {   
                                this.cards.push(response.data.results[x])
                                }

                            } else{
                                console.log('No more cards to load')
                            }
                        }
                    }
                })
            }
        }
    },
    getAPI(){
        const url = 'https://api.jsonbin.io/b/5cab36508b8d1301a25bd8fa/1/';


            axios.get(url)

            .then(response => {
                for (var i = 0; i < 5; i++) {
                    this.cards.push(response.data.results[i]);
                }
            })
            .catch(function (error) {
                console.log(error);
            })
            .then(function () {
                // always executed
            });
        console.log(this.cards)

    }
},
mounted() {
    this.scroll(this.card)
}
})

【问题讨论】：

你在.then中的这个循环只是真正受限API的伪代码？就像，你并没有真正限制这个例子中的响应。
我确实将初始响应限制在另一段代码中。我编辑了代码。这会是更合适的方式吗？谢谢。
我们可以在 JSFiddle 中获得一个工作示例吗？
@Deckerz 当然，jsfiddle.net/leetajz/4rbwkj6a/17

标签： json vue.js axios

【解决方案1】：

更改了您进行检查的方法。不是从卡片长度做它，而是遍历结果长度，一旦你到达一张不存在的卡片，你添加它们，跟踪添加的数量并在 2 或没有剩余时返回。我把循环逻辑改成了so。

//Card with position i from results doesn't exist
if(this.cards[i] == undefined){
   //add this card - maybe add more logic to check for duplicate incase of reordering of response
   this.cards.push(response.data.results[i])
   //track card added
   cardsAdded++;
} else {
    console.log('No more cards to load')
}

//check if cards added has reach limit of 2
if(cardsAdded == 2)
    return;

见：https://jsfiddle.net/as4dm03q/

【讨论】：