之前几篇博客在讲解Promise时,是通过一个boolean值来表示Promise成功或失败的,感觉缺乏实用性。本文改编几个网上的应用案例。
异步加载图片,若加载成功则显示,否则在控制台提示错误,改编自:https://mdn.github.io/js-examples/promises-test/
<html>
<head></head>
<body>
</body>
<script>
function imgLoad(url) {
return new Promise(function(resolve, reject) {
var request = new XMLHttpRequest();
request.open('GET', url);
request.responseType = 'blob';
request.onload = function() {
if (request.status === 200) {
resolve(request.response);
} else {
reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
}
};
request.onerror = function() {
reject(Error('There was a network error.'));
};
request.send();
});
}
var body = document.querySelector('body');
var myImage = new Image();
imgLoad('http://bpic.588ku.com/back_pic/05/44/67/725a92baff2e6cb.jpg').then(function(response) {
var imageURL = window.URL.createObjectURL(response);
myImage.src = imageURL;
body.appendChild(myImage);
}, function(Error) {
console.log(Error);
});
</script>
</html>
直接在本机使用浏览器即可体验:
若将图片名改为无效后,效果如下:
若将域名改为无效后,效果如下:
仔细体会resolve、reject和then的配合使用。