vue等待函数执行完后执行下一行命令

在Vue中，如果你想要确保某个函数执行完毕后再执行下一行命令，你可以使用JavaScript的Promise和async/await特性。以下是一个简单的例子：

<template>
  <div>
    <button @click="executeFunctions">Click Me</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    async executeFunctions() {
      // 调用第一个函数，并等待它完成
      await this.firstFunction();
 
      // 第一个函数执行完毕后，执行这里的代码
      console.log('First function is done!');
 
      // 调用第二个函数，并等待它完成
      await this.secondFunction();
 
      // 第二个函数执行完毕后，执行这里的代码
      console.log('Second function is done!');
    },
    firstFunction() {
      return new Promise((resolve) => {
        // 模拟异步操作，比如API调用或其他耗时任务
        setTimeout(() => {
          console.log('First function is executed.');
          resolve();
        }, 1000);
      });
    },
    secondFunction() {
      return new Promise((resolve) => {
        // 模拟异步操作
        setTimeout(() => {
          console.log('Second function is executed.');
          resolve();
        }, 1000);
      });
    }
  }
}
</script>

在这个例子中，executeFunctions 方法是按序执行两个异步函数 firstFunction 和 secondFunction 的示例。通过在每个函数调用前加上 await 关键字，Vue会等待这两个函数完成其异步操作后，才会继续执行后续的代码。这确保了在执行后续代码之前，所有相关的异步操作都已经完成。