Vue多次异步调用方法

Question

我有一个使用加载方法加载项目的组件。

我需要另一个方法多次调用 load 方法来加载更大的数据块。

我需要进行异步请求，等待第一次完成后再运行。

我想我需要建立一个承诺或其他东西，但我没有这样做。有人对此有好的解决方案吗？

这是一个解释我的问题的 jsfiddle。 https://jsfiddle.net/qa5sm7hj/21/

这是javascript组件本身

new Vue({
  el: '#cmp',
  data: {
    items: []
  },
  methods: {
        loadItems() {
        //pretend this is an http request that fetches data and then push them to items array.
        ['one', 'two', 'three'].forEach(item => {
            this.items.push(item);
      });
    },
    ultraLoadItems() {
      for (var i = 1; i <= 5;i++) {
        //I want to load new items 5 time in a row
        //and wait until each iteration is done.
        this.loadItems();
      }
    }
  }
})

这里是 HTML

<div id="cmp">
  <div>
    <button @click="ultraLoadItems">Ultra load</button><br>
    <span>{{ items.length }}</span>
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
  </div>
</div>

Answer 1

这是我的解决方案

new Vue({
  el: '#cmp',
  data: {
    items: []
  },
  methods: {
        loadItems() {
        let vm = this;
        return new Promise(function (resolve, reject) {
        ['one', 'two', 'three'].forEach(item => {
          vm.items.push(item);
        });
        resolve();
      })            
    },
    ultraLoadItems() {
        for (var i = 1; i <= 5;i++) {
        this.loadItems();
      }
    }
  }
})