Promise应用(二)

在有限时间内,若图片加载成功则显示,否则显示“降级”图片。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>

  <body>
    <h1>Promise example</h1>
  </body>

<script type="text/javascript">
var body = document.querySelector('body');

//请求某个图片资源
function requestImg(){
    var p = new Promise(function(resolve, reject){
        var img = new Image();
        img.onload = function(){
            console.log('图片加载成功,并将Image对象传递下去');
            resolve(img);
        }
        //img.src = 'http://pic1.win4000.com/wallpaper/b/590d97535aa80.jpg';
				img.src = 'http://bpic.588ku.com/back_pic/05/44/67/725a92baff2e6cb.jpg';
    });
    return p;
}

//延时函数,用于给请求计时
function timeout(){
    var p = new Promise(function(resolve, reject){
        setTimeout(function(){
            var img404 = new Image();
            img404.src='404.png';
						console.log('图片加载失败,并将同目录下的降级Image对象传递下去');
            reject(img404);
        }, 5000);
    });
    return p;
}

Promise
.race([requestImg(), timeout()])
.then(function(results){
    console.log(results);
    body.appendChild(results);
})
.catch(function(reason){
    console.log(reason);
    body.appendChild(reason);
});    
</script>
</html>

注意:catch里console.log(reason);并没有起到效果,因为当reject(img404)传递下去的时候,Promise调用链早已结束。

如果将setTimeout里的时间改为很小的数,如50,则效果:

注意:then里的console.log(results);没有起效,原因与前面类似。

改编自:http://www.cnblogs.com/lvdabao/p/es6-promise-1.html

猜你喜欢

转载自blog.csdn.net/jinjiankang/article/details/79618922