Promise以及Promise.all()的描述和用法

Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。

什么是promise？

• 一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知的值。
• 它让您能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。
• 这样使得异步方法可以像同步方法那样返回值：
• 异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。

Promise的三种状态

一个Promise必然处于以下几种状态：

1. 待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。
2. 已兑现（fulfilled）: 意味着操作成功完成。
3. 已拒绝（rejected）: 意味着操作失败。

如果 promise 在一个相应的处理程序被绑定时就已经被兑现或被拒绝了，那么这个promise 的 then 方法排列起来的相关处理程序就会被调用，因此在完成异步操作和绑定处理方法之间不会存在竞争状态。

因为 Promise.prototype.then 和  Promise.prototype.catch 方法返回的是 promise， 所以它们可以被链式调用。

 

Promise.all(iterable)

• 这个方法返回一个新的promise对象
• 该promise对象在iterable参数对象里所有的promise对象都成功的时候才会触发成功
• 一旦有任何一个iterable里面的promise对象失败则立即触发该promise对象的失败
• 这个新的promise对象在触发成功状态以后，会把一个包含iterable里所有promise返回值的数组作为成功回调的返回值，顺序跟iterable的顺序保持一致
• 如果这个新的promise对象触发了失败状态，它会把iterable里第一个触发失败的promise对象的错误信息作为它的失败错误信息
• Promise.all方法常被用于处理多个promise对象的状态集合

 

Promise.all(iterable) 方法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise 都“完成（resolved）”或参数中不包含 promise 时回调完成（resolve）；如果参数中  promise 有一个失败（rejected），此实例回调失败（reject），失败的原因是第一个失败 promise 的结果。

它通常在启动多个异步任务并发运行并为其结果创建承诺之后使用，以便人们可以等待所有任务完成。

 

用法举例

1.用法一

<template>
 <el-form class="member-info" ref="userForm1" :model="{users}">
      ...
      </el-form>
<el-form class="member-info" ref="userForm2" :model="{users}">
      ...
      </el-form>
</template>

<script>
 Promise.all([
     this.$refs.userForm1.validate(),
     this.$refs.userForm2.validate()
]).then(res => {
      // Promise.all 传入了两个元素组成的数组
      // 所以res也是一个数组，对应上面promise的结果
     if (res[0] && res[1]) {
        //验证成功
        //已兑现（fulfilled）
        }
      });
    

</script>

2.用法二

<template>
 <el-form class="member-info" ref="userForm1" :model="{users}">
      ...
      </el-form>
<el-form class="member-info" ref="userForm2" :model="{users}">
      ...
      </el-form>
</template>

<script>
    const [userForm1valid,userForm2valid] = await  Promise.all([
     this.$refs.userForm1.validate(),
     this.$refs.userForm2.validate()
])


      // Promise.all 传入了两个元素组成的数组
      // 对应上面promise的结果
     if (userForm1valid && userForm2valid) {
        //已兑现（fulfilled）
        }
      
    

</script>