Promise 静态方法 all、race、any、allSettled的使用

最新推荐文章于 2024-04-07 14:42:27 发布

ZL随心

最新推荐文章于 2024-04-07 14:42:27 发布

阅读量537

点赞数

分类专栏： js 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_44832362/article/details/128441404

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

前言

6个任务方法

function resolve1 () {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve('resolve1')
        }, 1000)
      })
    }
    function resolve2 () {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve('resolve2')
        }, 2000)
      })
    }
    function resolve3 () {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve('resolve3')
        }, 3000)
      })
    }
    function reject1 () {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          reject('reject1')
        }, 1000)
      })
    }
    function reject2 () {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          reject('reject2')
        }, 2000)
      })
    }
    function reject3 () {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          reject('reject3')
        }, 3000)
      })
    }

1、Promise.all()

结论：当所有Promise任务是resolve结果才是resolve--也就是执行then里面的回调，只要有一个任务reject则就会执行catch里面的回调，执行时间是所有任务中执行时间最长的那个任务所对应的时间

代码

 // 测试Promise.all([])、全部成功
    Promise.all([resolve1(), resolve2(), resolve3()]).then((res) => {
      console.log(res)
    }).catch((err) => {
      console.log(err)
    })
    // 测试Promise.all([])、有出错的
    Promise.all([resolve1(), reject1(), resolve3()]).then((res) => {
      console.log('then', res)
    }).catch((err) => {
      console.log('err', err)
    })
    Promise.all([resolve1(), reject2(), resolve3()]).then((res) => {
      console.log('then', res)
    }).catch((err) => {
      console.log('err', err)
    })
    Promise.all([resolve1(), reject2(), reject3()]).then((res) => {
      console.log('then', res)
    }).catch((err) => {
      console.log('err', err)
    })

2、Promise.race()

执行结果就是最先改变状态的promise任务的状态，无论是resolve还是reject，那个先改变状态，整个任务的执行时间就是对应的那个成功任务所对应的时间

代码

// race 最先改变状态的
    Promise.race([resolve1(), resolve2(), resolve3()]).then((res) => {
      console.log('then', res)
    }).catch((err) => {
      console.log('err', err)
    })
    Promise.race([reject1(), resolve2(), resolve3()]).then((res) => {
      console.log('then', res)
    }).catch((err) => {
      console.log('err', err)
    })
    Promise.race([resolve1(), reject2(), resolve3()]).then((res) => {
      console.log('then', res)
    }).catch((err) => {
      console.log('err', err)
    })

3、Promise.any()

捕获任意一个先成功执行的Promise任务，那个先成功，整个任务的执行时间就是对应的那个成功任务所对应的时间

代码

Promise.any([resolve1(), reject1(), resolve3()]).then((res) => {
      console.log('then', res)
    }).catch((err) => {
      console.log('err', err)
    })
    Promise.any([reject1(), reject2(), resolve3()]).then((res) => {
      console.log('then', res)
    }).catch((err) => {
      console.log('err', err)
    })
    Promise.any([reject1(), reject2(), reject3()]).then((res) => {
      console.log('then', res)
    }).catch((err) => {
      console.log('err', err)
    })

4、Promise.allSettled()

代码

/** Promise.allSettled捕获所有任务的执行结果 */
    Promise.allSettled([resolve1(), reject1(), resolve3()]).then((res) => {
      console.log('then', res)
    })
    Promise.allSettled([reject1(), reject2(), resolve3()]).then((res) => {
      console.log('then', res)
    })
    Promise.allSettled([reject1(), reject2(), reject3()]).then((res) => {
      console.log('then', res)
    })

完整测试代码

<!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>Promise静态方法的使用</title>
</head>

<body>
  <script>
    /**
     * Promise.all([promise1, promise2,promise3...])当多个promise任务不相互依赖的时候，同时执行，
     * 就可以使用all方法执行，然后等待所有任务执行完毕、在处理全部结果，当全部为resolved结果才是成功，否则
     * 一旦出现rejected则结果就是执行失败
     * 
     * Promise.race([promise1, promise2,promise3...])
     * 当多个不相互依赖的promise任务同时执行，最先改变状态的结果就是最终的结果
     * 
     * Promise.allSottled([promise1, promise2,promise3...])
     * 
     * Promise.any([promise1, promise2,promise3...])
     * 类似race但是，只会获取resolved结果，除非全部是rejected，结果才是rejected
     */
    function resolve1 () {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve('resolve1')
        }, 1000)
      })
    }
    function resolve2 () {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve('resolve2')
        }, 2000)
      })
    }
    function resolve3 () {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve('resolve3')
        }, 3000)
      })
    }
    function reject1 () {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          reject('reject1')
        }, 1000)
      })
    }
    function reject2 () {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          reject('reject2')
        }, 2000)
      })
    }
    function reject3 () {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          reject('reject3')
        }, 3000)
      })
    }

    /** 测试Promise.all([])、全部成功 */
    // Promise.all([resolve1(), resolve2(), resolve3()]).then((res) => {
    //   console.log(res)
    // }).catch((err) => {
    //   console.log(err)
    // })
    // // 测试Promise.all([])、有出错的
    // Promise.all([resolve1(), reject1(), resolve3()]).then((res) => {
    //   console.log('then', res)
    // }).catch((err) => {
    //   console.log('err', err)
    // })
    // Promise.all([resolve1(), reject2(), resolve3()]).then((res) => {
    //   console.log('then', res)
    // }).catch((err) => {
    //   console.log('err', err)
    // })
    // Promise.all([resolve1(), reject2(), reject3()]).then((res) => {
    //   console.log('then', res)
    // }).catch((err) => {
    //   console.log('err', err)
    // })

    /** race 最先改变状态的 */
    // Promise.race([resolve1(), resolve2(), resolve3()]).then((res) => {
    //   console.log('then', res)
    // }).catch((err) => {
    //   console.log('err', err)
    // })
    // Promise.race([reject1(), resolve2(), resolve3()]).then((res) => {
    //   console.log('then', res)
    // }).catch((err) => {
    //   console.log('err', err)
    // })
    // Promise.race([resolve1(), reject2(), resolve3()]).then((res) => {
    //   console.log('then', res)
    // }).catch((err) => {
    //   console.log('err', err)
    // })

    /** Promise.any 那个先成功结果就是那个，全部为reject结果才是reject*/
    // Promise.any([resolve1(), reject1(), resolve3()]).then((res) => {
    //   console.log('then', res)
    // }).catch((err) => {
    //   console.log('err', err)
    // })
    // Promise.any([reject1(), reject2(), resolve3()]).then((res) => {
    //   console.log('then', res)
    // }).catch((err) => {
    //   console.log('err', err)
    // })
    // Promise.any([reject1(), reject2(), reject3()]).then((res) => {
    //   console.log('then', res)
    // }).catch((err) => {
    //   console.log('err', err)
    // })

    /** Promise.allSettled捕获所有任务的执行结果 */
    Promise.allSettled([resolve1(), reject1(), resolve3()]).then((res) => {
      console.log('then', res)
    })
    Promise.allSettled([reject1(), reject2(), resolve3()]).then((res) => {
      console.log('then', res)
    })
    Promise.allSettled([reject1(), reject2(), reject3()]).then((res) => {
      console.log('then', res)
    })
  </script>
</body>

</html>