Promise应用（一）

最新推荐文章于 2024-04-26 11:47:52 发布

火柴头9527

最新推荐文章于 2024-04-26 11:47:52 发布

阅读量1k

点赞数

分类专栏： ES6 文章标签： es6 promise

本文链接：https://blog.csdn.net/jinjiankang/article/details/79618358

版权

ES6 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

之前几篇博客在讲解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的配合使用。

火柴头9527

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Promise应用（一）

之前几篇博客在讲解Promise时，是通过一个boolean值来表示Promise成功或失败的，感觉缺乏实用性。本文改编几个网上的应用案例。异步加载图片，若加载成功则显示，否则在控制台提示错误，改编自：https://mdn.github.io/js-examples/promises-test/&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;...
复制链接

扫一扫