Infinitegrid 重复 API 调用

Question

我使用vue-infinitegrid并且在浏览器中意识到后端 API 被调用了 3 次。首先是一些代码（git）：<GridLayout  ref="ig"  :options="options"  :layoutOptions="layoutOptions"  @append="onAppend"  @layout-complete="onLayoutComplete"  @image-error="onImageError">  <div slot="loading">Loading...</div>  <div class="item" v-for="(item) in list" :key="item.key">    <ViewItem :item="item"/>  </div></GridLayout>data() {  return {    start: 0,    loading: false,    list: [],    isEnded: false,    options: {      isOverflowScroll: false,      useFit: true,      useRecycle: true,      horizontal: false,      align: 'center',      transitionDuration: 0.2,    },    layoutOptions: {      margin: 15,      align: 'center',    },    pageSize: 3,  };},methods: {  async onAppend({ groupKey, startLoading }) {    this.$log.debug(`onAppend group key = ${groupKey}`);    const { list } = this;    if (this.isEnded) return;    const items = await this.loadItems();    startLoading();    this.list = list.concat(items);  },  async loadItems() {    const start = this.start || 0, size = parseFloat(this.pageSize), { tag } = this;    this.$log.debug(`loadItems start = ${start}, size = ${size}`);    let res = await this.$store.dispatch('GET_ITEM_STREAM', { start, size, tag });    if (res.length === 0) { // todo or smaller than requested      this.$log.debug('loadItems no data');      this.isEnded = true;      this.$refs.ig.endLoading();      return res;    }    if (this.exceptItem) {      res = res.filter(item => item._id !== this.exceptItem._id);    }    this.start = start + res.length;    this.$log.debug('loadItems finished');    return res;  },  onLayoutComplete({ isLayout, endLoading }) {    this.$log.debug(`onLayoutComplete isLayout = ${isLayout}`);    if (!isLayout) {      endLoading();    }  },我可以看到它在调用start后增加。onAppend看起来像一些并发问题，无限网格组件不会等到 REST 调用完成并触发新事件。有没有人对此组件有任何经验，并且知道当我需要等待后端响应时如何处理这种情况？

Answer 1

在startLoading和endLoading中，加载栏出现和消失，并且一些功能暂时禁用（moveTo、useFit）。

附加和前置工作有效，必须通过 isProcessing 方法来阻止。

onAppend({ groupKey, startLoading, currentTarget }) {
    if (currentTarget.isProcessing()) {
            return;
    }
}