promise在实际的项目中解决的问题

背景：

一个页面需要同时校验两个表单，都校验成功之后才能执行发送，同时校验，且同时提示哪里填写出错，所以直接promise.then的链式调用、async await（任何一个await语句后面的 Promise 对象变为reject状态，那么整个async函数都会中断执行）、 和普通的回调函数都无法实现，所以用到了promise.all 

Promise.all(iterable) (iterable 可迭代的)，并且只返回一个Promise实例

此实例在 iterable 参数内所有的 promise 都完成（resolved）；如果参数中 promise 有一个失败（rejected），此实例回调失败（reject）

为了清晰展示怎么使用，由于实际项目vue编写且业务复杂，把promise.all 从项目抽离出来简化了一下，以 index.html 简化出来，放到html里面，是为了可以直接浏览器允许，立马展示运行效果

html文件：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Promsie</title>
</head>

<body>
  <script>
    function validate1() {
      return new Promise((resolve, reject) => {
        if (this.flag) {
          setTimeout(() => { resolve('校验1') }, 3000)
        } else {
          reject('校验失败')
        }

      })
    }
    function validate2() {
      return new Promise((resolve) => {
        setTimeout(() => { resolve('校验2') }, 1000)
      })
    }
    function send() {
      const promiseList = [this.validate1(), this.validate2()]
      // Promise.all 全都成功返回，否则error
      // Promise.allSettled 都执行完之后返回p对象对应的promise结果  例：{reason: "校验失败"status: "rejected"}
      // Promise.any 当其中的一个 promise 成功，就返回那个成功的promise的值。
      // Promise.race 一旦迭代器中的某个promise成功（解决）或拒绝，返回的 promise就会成功（解决）或拒绝 就是谁请求的速度快，先返回谁，无论失败与否
      Promise.all(promiseList)
        .then((res) => { console.log(res) })
        .catch(() => console.log('promise--error'))
        .finally(() => console.log('无论结果怎样，结束了都走这'))
    }

    this.send()
  </script>
</body>

</html>

 注意： promise 执行了.then 又执行了.cantch的原因

 Promise会自动捕获内部异常，并交给rejected响应函数处理。

 .then函数中如果有异常代码，哪怕编辑器不报错。Promise会自动捕获内部异常,就会造成不仅执行了.then函数又执行了.catch函数的现象。

posted @ 2021-04-28 16:03  _skylar  阅读(221)  评论(0)  编辑  收藏  举报