promise.all()和Promise.race()學習

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()傳入空數組不做任何操作

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章