html5 promise的使用

来源：互联网发布：东北师大网络教育学院编辑：程序博客网时间：2024/04/29 10:14

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>

0 0