html5 promise的使用

最新推荐文章于 2025-10-12 14:44:43 发布

原创最新推荐文章于 2025-10-12 14:44:43 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#promise #javascript #defer

javascript 专栏收录该内容

15 篇文章

订阅专栏

本文通过一个抽奖示例展示了如何利用Promise来替代传统的Callback处理异步流程，以减少代码的复杂性和提高可维护性。示例中，每轮抽奖耗时1秒，并随机生成一个1到10之间的数来判断是否中奖。

promise的目的是减少callback的嵌套，提高代码的可维护性。看一个抽奖的例子，每次抽奖要1秒，共5次，生成一个1-10随机数，大于5则中奖。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title></title>
</head>
<body>
  <script>
    function drawPrize(){
      var defer = Promise.defer()
      setTimeout(function(){
        var random = parseInt(Math.random() * 10);
        if(random>5){
          defer.resolve({msg: 'gt 5', score: random});
        }else{
          defer.reject({msg: 'lte 5', score: random});
        }
      },1000);
      return defer.promise;
    }
    for(var i=1;i<6;i++){
      // drawPrize().then(function(data){
      //   console.log(data);
      //   console.log('您中奖了');
      // }).catch(function(data){
      //   console.log(data);
      //   console.log('您未中奖');
      // });
      drawPrize().then(function(data){
        console.log(data);
        console.log('您中奖了');
      },function(data){
        console.log(data);
        console.log('您未中奖');
      });
    }
  </script>
</body>
</html>

处理失败既可以放在catch中，也可以放在then的第二个参数。

Promise.defer()这种写法已经被一些新浏览器废弃，应使用new Promise()创建。

新代码：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title></title>
</head>
<body>

  <script>
    function drawPrize(){
      return new Promise(function(resolve,reject){
        setTimeout(function(){
          var random = parseInt(Math.random() * 10);
          if(random>5){
            resolve({msg: 'gt 5', score: random});
          }else{
            reject({msg: 'lte 5', score: random});
          }
        },1000);
      });
    }
    for(var i=1;i<6;i++){
      // drawPrize().then(function(data){
      //   console.log(data);
      //   console.log('您中奖了');
      // }).catch(function(data){
      //   console.log(data);
      //   console.log('您未中奖');
      // });
      drawPrize().then(function(data){
        console.log(data);
        console.log('您中奖了');
      },function(data){
        console.log(data);
        console.log('您未中奖');
      });
    }
  </script>
</body>
</html>