在有限时间内,若图片加载成功则显示,否则显示“降级”图片。
<!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