Promise的初体验（一）

<!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>
  
  
  <button type="button" class="btn btn-default" id="btn">抽奖</button>
  
  <script>
    function rand(m,n) {
      return Math.ceil(Math.random() * (n-m+1)) + m - 1
    }
    /**
    点击按钮，1S后显示是否中奖（30%概率中奖）
    若中奖弹出：恭喜恭喜，奖品为...
    若未中奖弹出：.....
    */


    //获取元素对象
    const btn = document.querySelector("#btn")

    //绑定单击事件
    btn.addEventListener("click", function(){
      //定时器
      setTimeout(() => {
        let n = rand(1,100)
        //获取从1到100的随机数
        if(n <= 30){
          alert("中奖了，奖品为")
        }
        else{
          alert("再接再厉")
        }

      },1000)
      
    })
  </script>
</body>
</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>Document</title>
</head>
<body>
  
  
  <button type="button" class="btn btn-default" id="btn">抽奖</button>
  
  <script>
    function rand(m,n) {
      return Math.ceil(Math.random() * (n-m+1)) + m - 1
    }
    /**
    点击按钮，1S后显示是否中奖（30%概率中奖）
    若中奖弹出：恭喜恭喜，奖品为...
    若未中奖弹出：.....
    */


    //获取元素对象
    const btn =document.querySelector("#btn")

    //绑定单击事件
    btn.addEventListener("click", function(){
      //Promise形式实现
      //resolve 解决 ，函数类型的数据
      //reject 拒绝 ， 函数类型的数据
      const p = new Promise((resolve, reject)=>{
        setTimeout(() => {
          let n = rand(1,100)
          //获取从1到100的随机数
          if(n <= 30){
            resolve();  //将promise对象的状态设置为“成功”
          }
          else{
            reject();  //将promise对象的状态设置为“失败”
          }

        },1000)
      });

      //then方法要接收两个参数
      p.then(
        ()=>{
          alert("中奖了，奖品为")
        },
        ()=>{
          alert("再接再厉")
        }
      )

      
    })
  </script>
</body>
</html>

Promise的初体验（二）

<!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>
  
  
  <button type="button" class="btn btn-default" id="btn">抽奖</button>
  
  <script>
    function rand(m,n) {
      return Math.ceil(Math.random() * (n-m+1)) + m - 1
    }
    /**
    点击按钮，1S后显示是否中奖（30%概率中奖）
    若中奖弹出：恭喜恭喜，奖品为...
    若未中奖弹出：.....
    */


    //获取元素对象
    const btn =document.querySelector("#btn")

    //绑定单击事件
    btn.addEventListener("click", function(){


      //Promise形式实现
      //resolve 解决 ，函数类型的数据
      //reject 拒绝 ， 函数类型的数据
      const p = new Promise((resolve, reject)=>{
        setTimeout(() => {
          let n = rand(1,100)
          //获取从1到100的随机数
          if(n <= 30){
            resolve(n);  //将promise对象的状态设置为“成功”
          }
          else{
            reject(n);  //将promise对象的状态设置为“失败”
          }

        },1000)
      });

      //value 值
      //reason 理由
      p.then(
        (value)=>{
          alert("中奖了，奖品为。。。 中奖数字为" + value)
        },
        (reason)=>{
          alert("再接再厉, 号码为：" + reason)
        }
      )
    })
  </script>
</body>
</html>

3、Promise的初体验(1+2)

Promise的初体验（一）

Promise的初体验（二）