一个Promise实例！！！！！（带完整代码）

最新推荐文章于 2024-05-10 10:43:06 发布

@ForFuture

最新推荐文章于 2024-05-10 10:43:06 发布

阅读量1.2k

点赞数

分类专栏：积少成多，量变到质变文章标签： ES6 Promise Image() window.URL Promise实例

原文链接：https://github.com/mdn/js-examples/tree/master/promises-test

版权

积少成多，量变到质变专栏收录该内容

7 篇文章 0 订阅

订阅专栏

promise实例

Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值.（其他就不解释了）；

点击学习 Promise学习地址

目录结构：

在这里插入图片描述

html文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">

    <title>Promise example</title>

    <link rel="stylesheet" href="">
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

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

    <p>Darth Vader image by <a href="https://www.flickr.com/photos/digital_stability/">Shawn Taylor</a>, published under a <a href="https://creativecommons.org/licenses/by-nc-nd/2.0/">Attribution-NonCommercial-NoDerivs 2.0 Generic</a> license.</p>
  </body>

  <script>
  function imgLoad(url) {
    // Create new promise with the Promise() constructor;
    // This has as its argument a function
    // with two parameters, resolve and reject
    return new Promise(function(resolve, reject) {
      // Standard XHR to load an image
      var request = new XMLHttpRequest();
      request.open('GET', url);
      request.responseType = 'blob';
      // When the request loads, check whether it was successful
      request.onload = function() {
        if (request.status === 200) {
        // If successful, resolve the promise by passing back the request response
          resolve(request.response);
        } else {
        // If it fails, reject the promise with a error message
          reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
        }
      };
      request.onerror = function() {
      // Also deal with the case when the entire request fails to begin with
      // This is probably a network error, so reject the promise with an appropriate message
          reject(Error('There was a network error.'));
      };
      // Send the request
      request.send();
    });
  }
  //获取body元素的引用，并创建一个新的image对象 
  var body = document.querySelector('body');
  var myImage = new Image(200,200);
  //Image()它的功能等价于 document.createElement('img')

  //用我们想要加载的URL来调用这个函数，然后链接
  //承诺然后then()方法到它的结尾。这包含两个回调
  imgLoad('myLittleVader.jpg').then(function(response) {
    //第一个在承诺解析时运行，并使用request.response,在resolve()方法中指定

    var imageURL = window.URL.createObjectURL(response);

    myImage.src = imageURL;
    body.appendChild(myImage);
//  第二个在承诺被拒绝时运行，并记录使用reject()方法指定的错误。
  }, function(Error) {
    console.log(Error);
  });
  </script>
</html>

点击看效果

知识点：

1·Image()函数将会创建一个新的HTMLImageElement实例。它的功能等价于 document.createElement(‘img’)

image地址

2··var imageURL = window.URL.createObjectURL(response);这个可返回URL.

@ForFuture

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一个Promise实例！！！！！（带完整代码）

promise实例Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值.（其他就不解释了）；点击学习 Promise学习地址目录结构：html文件：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="...
复制链接

扫一扫