vue中使用async、await和promise实现异步API的同步调用

<template>
  <div>
    <div @click="validate">校验</div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    // 同步校验
    async validate() {
      try {
        const result = await this.firstValidate()
        //在这里处理同步校验之后的操作
        alert(result)
      } catch (error) {}
    },
    // 校验1
    firstValidate() {
      return new Promise((resolve, reject) => {
        // 模拟异步调用
        setTimeout(() => {
          resolve(this.secondValidate())
        })
      })
    },
    // 校验2
    secondValidate() {
      return new Promise((resolve, reject) => {
        // 模拟异步调用
        setTimeout(() => {
          resolve(this.thirdValidate())
        })
      })
    },
    // 校验3
    thirdValidate() {
      return new Promise((resolve, reject) => {
        // 模拟异步调用
        setTimeout(() => {
          resolve('我是thirdValidate')
        })
      })
    }
  }
}
</script>