天天看點

html5 promise的使用

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>
           

繼續閱讀