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>
    
  • 相关阅读:
    Symmetric Order
    Red and Black
    Sticks(递归经典)
    Pascal Library
    cantor的数表
    OJ 调试技巧:VS2010 中 通过设置编译参数定义宏,无需修改源文件重定向标准输入输出
    strcmp
    最短周期串
    字母重排
    codeblocks 单步调试
  • 原文地址:https://www.cnblogs.com/cckui/p/7731739.html
Copyright © 2011-2022 走看看