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>


版权声明:本文为博主原创文章,未经博主允许不得转载。

使用ES6的Promise完美解决回调地狱

http://www.cnblogs.com/qq9694526/p/5714124.html 相信经常使用ajax的前端小伙伴,都会遇到这样的困境:一个接口的参数会需要使用另一个接口获取。...
  • oMingZi12345678
  • oMingZi12345678
  • 2016年11月13日 03:03
  • 2114

html5 promise的使用

promise的目的是减少callback的嵌套,提高代码的可维护性。看一个投资的例子,每次抽奖要1秒,共5次,生成一个1-10随机数,大于5则中奖。 functio...
  • shidaping
  • shidaping
  • 2016年08月31日 13:38
  • 554

html5 调用手机摄像头详解

html5 调用手机摄像头详解  首先,我们看看HTML代码结构,当然,这部分的DOM内容应该是在用户允许使用其摄像头事件出发后,动态加载生成的。  注意: 我们采用的是 640X480的...
  • wustzbq0713
  • wustzbq0713
  • 2015年06月06日 13:05
  • 5584

JavaScript再述promise的用法和常用方法

1 Promise概述 Promise对象是CommonJS工作组提出的一种规范,目的是为异步操作提供统一接口。 那么,什么是Promises? 首先,它是一个对象,也就是说与其他JavaScr...
  • jasonzds
  • jasonzds
  • 2016年12月17日 23:53
  • 13213

从HTML5与PromiseA+规范来看事件循环

写在最前 本次分享一下从HTML5与PromiseA+规范来迅速理解一波事件循环中的microtask 与macrotask。 欢迎关注我的博客,不定期更新中—— JavaScript小众系列开始更新...
  • weixin_40346046
  • weixin_40346046
  • 2017年10月19日 11:53
  • 124

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

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

学习“HTML5 移动webapp阅读器”心得

【整理自whh】先来点题外话:实习ing,工作之余想找些开源的项目学习一波,看着慕课实战的项目不错,通过多番寻找在某鱼上面找了一个“HTML5 移动webapp阅读器”学习视频,然后就花了两天时间学习...
  • whh181
  • whh181
  • 2016年11月11日 17:26
  • 1400

promise应用示例讲解

Q:红灯三秒亮一次,绿灯一秒亮一次,黄灯2秒亮一次;如何让三个灯不断交替重复亮灯?(用Promse实现)三个亮灯函数已经存在: function red(){     c...
  • u012125579
  • u012125579
  • 2016年05月22日 13:13
  • 894

ES6 Promise 用法

一、认识promise对象         FIREFOX 控制台直接输入  Promise         我们看到 几个类方法:all   race  reject resolve     ...
  • cut001
  • cut001
  • 2017年06月17日 11:19
  • 1749

第十节,使用promise操作ajax

Document
  • daily886
  • daily886
  • 2017年04月27日 17:53
  • 411
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5 promise的使用
举报原因:
原因补充:

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