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>
    
  • 相关阅读:
    C#使用Json
    JQuery AJAX介绍
    封装一个自己的 Ajax小框架
    AJAX跨域实现
    AJAX 一些常用方法
    完整的 AJAX 写法(支持多浏览器)
    AJAX 简单上手
    利用反射生成SQL语句
    访问Access数据库(有多个数据库时 体现多态)
    DataTable操作(建表,建行,建列,添加数据)
  • 原文地址:https://www.cnblogs.com/cckui/p/7731739.html
Copyright © 2011-2022 走看看