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