promise.all()和Promise.race()学习

最新推荐文章于 2025-06-20 15:45:56 发布

原创最新推荐文章于 2025-06-20 15:45:56 发布 · 833 阅读

7 ·

CC 4.0 BY-SA版权

ES6 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了JavaScript中Promise.all和Promise.race的功能及用法。Promise.all用于等待所有Promise实例都完成后再进行下一步操作；Promise.race则是返回最先完成的Promise的结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Promise.all()

Promise.all()可以把多个Promise实例包装成一个新的Promise实例。

情况1：Promise.all里的Promise全返回成功，那么Promise.all返回成功，并且返回一个由里面Promise实例参数组成的数组。

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<script type="text/javascript">
  function getDate1(){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        console.log("第一条数据执行完毕");
        resolve("date1");
        },1000)
    });
  }
    function getDate2(){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        console.log("第二条数据执行完毕");
        resolve("date2");
        },1000)
    });
  }
  function getDate3(){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        console.log("第三条数据执行完毕");
        resolve("date3");
        },1000)
    });
  }
  function getDate4(){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        console.log("第四条数据执行完毕");
        resolve("date4");
        },5000)
    });
  }
  let p=Promise.all([getDate1(),getDate2(),getDate3(),getDate4()]);
  p.then(()=>{},e=>{
    console.log(e);
  })
</script>
</body>
</html>

情况2：Promise.all里的Promise有一个返回失败，那么Promise.all返回失败，并且失败的Promise执行reject代码，成功的Promise执行resolve代码。

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<script type="text/javascript">
  function getDate1(){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        console.log("第一条数据执行完毕");
        resolve("date1");
        },1000)
    });
  }
    function getDate2(){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        console.log("第二条数据执行完毕");
        resolve("date2");
        },1000)
    });
  }
  function getDate3(){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        console.log("第三条数据执行完毕");
        resolve("date3");
        },1000)
    });
  }
  function getDate4(){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        // console.log("第四条数据执行完毕");
        reject("date4 err");
        },500);
    });
  }
  let p=Promise.all([getDate1(),getDate2(),getDate3(),getDate4()]);
  p.then(()=>{},e=>{
    console.log(e);
  })
</script>
</body>
</html>

情况3：Promise.all()传入一个空数组，立即返回成功。

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<script type="text/javascript">
  function getDate1(){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        console.log("第一条数据执行完毕");
        resolve("date1");
        },1000)
    });
  }
    function getDate2(){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        console.log("第二条数据执行完毕");
        resolve("date2");
        },1000)
    });
  }
  function getDate3(){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        console.log("第三条数据执行完毕");
        resolve("date3");
        },1000)
    });
  }
  function getDate4(){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        // console.log("第四条数据执行完毕");
        reject("date4 err");
        },500);
    });
  }
  let p=Promise.all([]);
  p.then(()=>{
    console.log("aaaaa");
  },e=>{
    console.log(e);
  })
</script>
</body>
</html>

Promise.race()

Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

  function getDate1(){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        console.log("第一条数据执行完毕");
        resolve("data1");
        },1000)
    });
  }
    function getDate2(){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        console.log("第二条数据执行完毕");
        resolve("data2");
        },300)
    });
  }
  function getDate3(){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        console.log("第三条数据执行完毕");
        resolve("data3");
        },1000)
    });
  }
  function getDate4(){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        // console.log("第四条数据执行完毕");
        reject("data4 err");
        },500);
    });
  }
  let p=Promise.race([getDate1(),getDate2(),getDate3(),getDate4()]);
  p.then(data=>{
    console.log(data);
  },e=>{
    console.log(e);
  })

Promise.race()传入空数组不做任何操作