vue 一个点击触发方法内 调用多个方法 进行异步加载 getlist() 加载完 再继续向下走

在Vue中，如果你想在一个点击事件中依次触发多个异步操作（如`getlist()`），并且等待前一个请求完成后才执行下一个，你可以使用Promise链或者async/await来控制这个流程。这里是一个简单的例子：

<template>
  <button @click="loadData">点击加载数据</button>
  <!-- 可能会展示一些 loading 或者空列表的状态 -->
  <div v-if="isLoading">{{ message }}</div>
  <ul v-if="dataList">
    <li v-for="item in dataList">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true,
      dataList: [],
      message: '加载中...'
    };
  },
  methods: {
    async loadData() {
      try {
        // 异步获取第一个列表
        this.dataList = await this.getlist1();

        // 如果需要加载更多，可以接着调用第二个列表，假设它返回一个Promise
        if (this.hasMore) {
          this.dataList = [...this.dataList, ...await this.getlist2()];
        }

        // 完成所有操作后设置isLoading为false
        this.isLoading = false;
      } catch (error) {
        console.error('加载数据出错:', error);
      }
    },
    getlist1() {
      // 模拟异步操作
      return new Promise((resolve) => setTimeout(() => resolve(['Item 1', 'Item 2']), 1000));
    },
    getlist2() {
      return new Promise((resolve) => setTimeout(() => resolve(['Item 3', 'Item 4']), 2000)); // 假设这里有更多的数据
    }
  }
};
</script>

在这个例子中，当你点击按钮时，`loadData`方法会被调用。首先，`getlist1`会被异步执行，然后等待其完成后再执行`getlist2`。一旦所有数据都加载完毕，`isLoading`状态就会改变，显示实际的数据。