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;     } }