前言

都知道promise让回调地狱加优雅，async await能等待异步的执行，那么在真实开发中，我们如何使用async await让代码更加优雅呢？

案例一

在做后台项目中我们不免会遇到一些表单的提交，使用原框架的提交逻辑校验表单代码太“啰嗦”

this.$refs['form'].validate( valid => {
        if (valid) {
          if (this.form.id != null) {
                updateInfo(this.form).then(res => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addInfo(this.form).then(res => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        } 
}

看着重复代码是不是有点多，下面使用async await让这段代码更加优雅

 /**封装提交按钮函数
     * params
     * action：请求url
     * form：form名称
     * successMessage：成功处理*/
    async performFormAction(action, form, successMessage) {
      const response = await action(form)
      if (res) {
        this.$modal.msgSuccess(successMessage)
        this.open = false
        this.getList()
      }
    }

  this.$refs['form'].validate(async valid => {
        if (valid) {
          if (this.form.id != null) {
            await this.performFormAction(updateParentInfo, this.form, '修改成功')
          } else {
            await this.performFormAction(addParentInfo, this.form, '新增成功')
          }
        }
      })

显然，下面这段代码更加简洁，而且可以单独封装多处使用

案例二

看完表单提交的，再来看看删除弹出层的

this.$modal
        .confirm('是否确认删除编号为"' + ids + '"的数据项？')
        .then(function () {
          return delParentInfo(ids)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {}) 

直接看优化后的

 try {
        await this.$modal.confirm(`是否确认删除编号为"${ids}"的数据项？`)
        await delParentInfo(ids)
        this.getList()
        this.$modal.msgSuccess('删除成功')
      } catch (error) {
        // 可以在这里处理错误，如果需要的话
      }

总结

本文展示了两种我们常说的async await优化代码的方式，显然async await能让代码更加直观、简洁，还有更好的方法可以指点一下