vue async/await解决异步

当一个方法中有多个异步方法，可以通过async/await变为同步，执行完上一个异步，才继续执行接下来的代码。

例：多个子组件中有promise构造函数

子组件1

      SubmitForm() {
        let p = new Promise(function(resolve, reject){   // promise
          this.$refs['FormInline'].validate((valid) => { // 表单验证
            // console.log(valid)
            if (valid) {
              resolve(this.formInline)     // 验证成功返回表单
            } else {
              resolve('error')             
            }
          })
        })
        return p
      },

子组件2

    submitForm() {
      let self = this
      let p = new Promise(function(resolve, reject){
        self.$refs['formInline'].validate((valid) => {
          if (valid) {
            resolve(self.formInline)
          } else {
            resolve('error')
          }
        })
      })
      return p
    }

父组件中调用拼装

 // 保存按钮
// methods方法前加async
    async saveForm (intStatus) {
      let baseInfoFlag = false 
// 设置baseInfoFlag，trusteeshipFlag，都成功才能执行下一步    
// 调用子组件的方法（promise）
// 方法前面加await
      await  this.$refs.baseInfo.submitForm().then(data => { 
        console.log('saveForm:::baseInfo', data)
        if (data !== 'error') {
          baseInfoFlag = true
          this.baseInfoForm = data
        } else {
          baseInfoFlag = false
        }
      })

      let trusteeshipFlag = false
      await this.$refs.trusteeship.SubmitForm().then(data => {
        console.log('saveForm:::trusteeship', data)
        if (data !== 'error') {
          trusteeshipFlag = true
          this.trusteeshipForm = data
        } else {
          trusteeshipFlag = false
        }
      })
// 两个都验证通过后返回true
      if (baseInfoFlag && trusteeshipFlag) {
        console.log('baseInfoForm::', this.baseInfoForm)
        console.log('trusteeshipForm', this.trusteeshipForm)
        this.submit(intStatus)  // 成功则执行调用接口方法，执行一下步
      } else {
        console.log('失败')
        this.backTop()  // 失败页面返回顶部
      }
    },