Promise 的痛点，async await 给我们带来的好处(重写)

[AnnVoV]

---

背景

一般我们的后台页面中会存在多个表单项，我们在保存前会对this.$refs.form这个数组做一次validate

已知

我们后台用了element-ui, 表单验证的validate 是个异步方法，那么我们怎么样等到所有表单验证完了再走下一步？很明显我们想到用Promise.all 所以我们可以把async 和 promise.all 结合起来用

结果

...
async validate() {
     //  返回一个PromiseArray
     const promiseArray = this.$refs.form.map((form) => {
            return form.validate();
     }); 
    //  这里直接返回一个Promise.all
    return await Promise.all(promiseArray);
}

// 【注】其实直接使用promise.all 也可以，在此场景下没必要使用async await。。。

submit() {
     this.validate()
    .then(() => {
         // 提交数据
    })
    .catch((err) => {
        // 只要有一个表单验证不通过，就会被catch
    })
}

推荐阅读： 深入理解ES6 Async Functions (异步函数) https://zhuanlan.zhihu.com/p/30688707