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>
posted @ 2017-10-25 19:22  Mr.曹  阅读(222)  评论(0编辑  收藏  举报