zoukankan      html  css  js  c++  java
  • ECMAScript6——异步操作之Promise

    Promise对象的参数为一个回调函数,这个回调函数有两个参数,分别是resolve, reject(这俩参数的名字可任取),resolve,reject分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数 。

    <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
        	</style>
        </head>
        <body>
        <script>
        	const imgs = [
        	 'http://img1.3lian.com/2015/a1/14/d/151.jpg',
        	 'http://photos.tuchong.com/110168/f/2034247.jpg',
        	 'http://img1.3lian.com/2015/a1/129/d/193.jpg'
        	];
        
        	/* 第一步:实例化Promise对象
        		该对象的参数为一个回调函数,这个回调函数有两个参数,分别是resolve, reject(这俩参数的名字可任取),resolve,reject分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数 
        	*/
        	const p = new Promise(function (resolve, reject){
        	  const img = new Image(); // 声明一个image
        	  img.src = imgs[1];
        	  img.onload = function (){ // 指当图片加载(onload)成功时,执行resolve函数
        		resolve(this); // resolve(this)指将图片本身当做参数传给resolve
        	  };
        	  img.onerror = function (){ // 指当图片加载失败时,执行reject函数
        		reject(new Error('图片加载失败'));
        	  };
        	});
        
        	/* 第二步:Promise对象处理方法
        		Promise对象有两个原型方法:
        			Promise.prototype.then()  
        			Promise.prototype.catch()
        		一旦Promise对象创建完成,就可以调用上面两个方法 
        	*/
        
        	// then()方法,接收连个参数,第一个参数为执行成功的回调函数,第二个参数为执行失败的回调函数(但是,一般后面的回调函数不常用,通常用catch()来捕获异常)
        	p.then(function (img) { // img就是上面resolve(this)中的this传过来的
        		document.body.appendChild(img)
        	}).catch(function (err) { // catch()来捕获异常,若图片加载失败,则执行之
        		console.log(err)
        	})
        
        </script>
        </body>
        </html>
    
  • 相关阅读:
    Mysql 创建联合主键
    Shell中的while循环
    shell 日期加减运算
    PHP日期格式转时间戳
    Uber 叫车时,弹出以下代码导致无法打车(An email confirmation has been sent to...),解决办法
    如何让Table显示滚动条
    mySQL中replace的用法
    打豪车应用:uber详细攻略(附100元优惠码)
    svn 命令行创建和删除 分支和tags
    php ob_start()、ob_end_flush和ob_end_clean()多级缓冲
  • 原文地址:https://www.cnblogs.com/cckui/p/7731739.html
Copyright © 2011-2022 走看看