html5 promise的使用

原创 2016年08月31日 13:38:05

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>


相关文章推荐

使用Promise/Deffered模式优化coco2d html5中的游戏动画!

问题: 在使用cocos2d html编写一系列的战斗动画时经常遇到一个精灵动作完成时需要继续播放另一个精灵动作 如下: //动作1 actionSetp1: function() { ...
  • 6346289
  • 6346289
  • 2013年12月24日 14:29
  • 1439

HTML5实现webApp中图片轮播的效果(一)之基本使用

最近开始用h5做一款BBS类的webapp,做好后嵌入公司的其他几个Android或ios应用中,这差不多算是混编开发了吧 在我看来,原生app和webapp各有优缺点,原生应用赢在稳定性好、用户体...

HTML5 - 经典的上中下三段式布局(并使用<nav>实现侧边导航链接)

这个是一个典型的三段式部局,上下两块分别是网页头部与尾部。中间区域又分为左边的侧边栏区域和右边的内容主体区域。1,效果图如下: 2,页面元素说明: (1)在最外层我们添加了一个wrapper,把所...

HTML5 -- 使用css3实现简单的响应式布局

本文简单的讲解了如何使用css3实现简单的响应式布局:html5文件: index01...

史上最全WebView使用,附送Html5Activity一份

如果本文帮助到你,本人不胜荣幸,如果浪费了你的时间,本人深感抱歉。 希望用最简单的大白话来帮助那些像我一样的人。如果有什么错误,请一定指出,以免误导大家、也误导我。 本文来自:http://www...

UploadiFive jquery html5上传插件使用[带项目源码]

UploadiFive jquery html5上传插件使用[带项目源码] 插件地址:http://www.uploadify.com/  插件文档:http://www.uploadify....

使用HTML5 FILE API上传图片移动端缩略图兼容问题

主要是解决某些浏览器存在base64编码显示不出图片来的问题

HTML5中meta属性的使用详解

meta属性在HTML中占据了很重要的位置。如:针对搜索引擎的SEO,文档的字符编码,设置刷新缓存等。虽然一些网页可能没有使用meta,但是作为正规军,我们还是有必要了解一些meta的属性,并且能够熟...

为您解惑:HTML5中使用MathML数学公式的简单讲解..........

HTML5 的 HTML 语法允许我们在文档内使用 ... 标签应用 MathML 元素。 部分MathML 元素如下: .........   用于设置其包裹的最终表达式的样式。 如:.....

关于HTML5中video标签在webstorm中使用绝对路径不能播放视频的解析

HTML5的新特性中出现了一个非常6的标签,这个标签的功能就是让多媒体文件可以很方便的在网页中播放。          HTML样例:     video src="功夫瑜伽.mp4" control...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5 promise的使用
举报原因:
原因补充:

(最多只允许输入30个字)