Promise的常用方法介绍（Promise.all()、Promise.any()、Promise.race()等）

最新推荐文章于 2024-07-13 00:09:37 发布

urnotwangPder

最新推荐文章于 2024-07-13 00:09:37 发布

阅读量2.9k

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/urnotwang/article/details/131526496

版权

Promise的常用方法介绍

一、Promise的all方法
- - - 1.需要接收一个数组类型的参数
    - 2.返回值: Promise对象，状态也是由数组中的每一个Promise对象的状态来决定的
- 1.代码如下（示例）：
二、Promise的race方法
- - - 如果有最先到达状态的（pending来更改成fulfilled或者是rejected），不管是成功状态还是失败的状态，都将以这个对象的状态和结果值为准
- 1.代码如下（示例）：
三、Promise的any方法
- 1.代码如下（示例）：
四、Promise的allSettled方法
- 1.代码如下（示例）：
总结

一、Promise的all方法

Promise的all方法作用主要是针对于多个Promise的异步任务的处理

1.需要接收一个数组类型的参数

2.返回值: Promise对象，状态也是由数组中的每一个Promise对象的状态来决定的

 当所有的Promise对象的状态都是成功的，最终的结果就是成功的Promise，结果值是由每一个Promise的结果值组成的数组
 当所有的Promise对象的状态但凡有一个是失败的，最终也是失败的Promise，结果值就是失败的这个Promise的结果值

1.代码如下（示例）：

<!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>Document</title>
</head>

<body>
  <!-- 
      Promise的all方法作用主要是针对于多个Promise的异步任务的处理
      需要接收一个数组类型的参数
      返回值: Promise对象，状态也是由数组中的每一个Promise对象的状态来决定的
             当所有的Promise对象的状态都是成功的，最终的结果就是成功的Promise，结果值是由每一个Promise的结果值组成的数组
             当所有的Promise对象的状态但凡有一个是失败的，最终也是失败的Promise，结果值就是失败的这个Promise的结果值
  -->
  <script>
    let p1 = new Promise((resolve, reject) => {
      resolve('ok')
    })
    let p2 = new Promise((resolve, reject) => {
      resolve('hello')

    })
    let p3 = new Promise((resolve, reject) => {
      resolve('success')
    })

    let result = Promise.all([p1, p2, p3])
    console.log(result);
  </script>
</body>

</html>

二、Promise的race方法

Promise.race方法需要传递参数为一个数组，数组表示的是Promise实例化对象

如果有最先到达状态的（pending来更改成fulfilled或者是rejected），不管是成功状态还是失败的状态，都将以这个对象的状态和结果值为准

1.代码如下（示例）：

<!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>Document</title>
</head>

<body>
  <!-- 
      Promise.race方法需要传递参数为一个数组，数组表示的是Promise实例化对象
      如果有最先到达状态的（pending来更改成fulfilled或者是rejected），不管是成功状态还是失败的状态，都将以这个对象的状态和结果值为准
   -->
  <script>
    const p1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(1)
      }, 1000);
    })
    const p2 = new Promise((resolve, reject) => {
      setTimeout(() => {
        reject(2)
      }, 3000);
    })
    const p3 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(3)
      }, 5000);
    })
    const result = Promise.race([p3, p1, p2])
    console.log(result);
  </script>
</body>

</html>

三、Promise的any方法

Promise的any方法，只要参数中有一个Promise实例化对象的状态为fulfilled，则整体结果就是fulfilled，只有当所有Promise实例对象都是rejected，结果才是rejected

1.代码如下（示例）：

<!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>Document</title>
</head>

<body>
  <!-- 
      Promise的any方法，只要参数中有一个Promise实例化对象的状态为fulfilled，则整体结果就是fulfilled
      只有当所有Promise实例对象都是rejected，结果才是rejected
   -->
  <script>
    let p1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        reject('err')
      }, 1000)
    })
    let p2 = new Promise((resolve, reject) => {
      setTimeout(() => {
        reject('error')
      }, 2000);
    })
    let p3 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('success')
      }, 3000);
    })

    let result = Promise.any([p2, p1, p3])
    console.log(result);
  </script>
</body>

</html>

四、Promise的allSettled方法

allSettled方法用来确定一组异步的请求是否都结束了（不管是成功还是失败），其中包含了fulfilled和rejected两种情况

1.代码如下（示例）：

<!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>Document</title>
</head>

<body>
  <script>
    // 封装一个Ajax函数
    function ajax(url) {
      return new Promise((resolve, reject) => {
        // 1.创建Ajax实例化对象
        let xhr = new XMLHttpRequest()
        console.log('ajax实例化对象刚刚被创建出来:', xhr.readyState); // 0
        // 2.打开请求
        xhr.open('get', url, true)
        console.log('ajax已经打开了请求:', xhr.readyState); // 1
        // 3.发送请求（send方法中发送的是请求体数据）
        xhr.send()
        // 4.客户端接收服务端中响应回来的结果数据
        xhr.onreadystatechange = function () {
          console.log(xhr.readyState); // 2、3、4
          /*
           * 2:已经完成了请求的发送
           * 3:响应结果途中还没有完全响应结果完毕...ing
           * 4:已经完全响应完毕结果了
           */
          // 5.判断
          if (xhr.readyState === 4) {
            // status:请求的状态码 200~299之间
            if (xhr.status >= 200 && xhr.status < 300) {
              // 6.获取请求体数据（JSON字符串=>JSON对象）
              resolve(xhr.responseText)
            } else {
              reject(xhr.responseText)
            }
          }
        }
      })
    }

    // allSettled方法用来确定一组异步的请求是否都结束了（不管是成功还是失败），其中包含了fulfilled和rejected两种情况
    Promise.allSettled([
      ajax('http://iwenwiki.com/api/blueberrypai/getChengpinInfo.php'),
      ajax('http://iwenwiki.com/api/blueberrypai/getListeningInfo.php')
    ]).then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    })
  </script>
</body>

</html>

总结

总结了工作中常用的一些Promise方法，并且面试中也常考到这些方法。

urnotwangPder

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
Promise的常用方法介绍（Promise.all()、Promise.any()、Promise.race()等）

常用的一些Promise方法，例如Promise.all()、Promise.any()、Promise.race()等
复制链接

扫一扫