普通异步加载与Promise

1.普通异步加载callback-hell

function loadImg(src,callback,fail){
	var img = document.createElement('img');
	//加载完毕执行的函数
	img.onload = function(){
		callback(img); 
	}
	//出现错误执行
	img.onerror = function(){
		fail();
	}
	img.src = src;
}
var src = 'http://www.baidu.com/img/bd_logo1.png';
//执行函数loadImg
loadImg(src,function(img){
	console.log(img.width);
}, function(){
	console.log('failed');
});

2.promise实现异步加载基本语法

function loadImg(src) {
	const promise = new Promise(function(resolve,reject){
		img.onload = function(){
			resolve(img); 
		}
		img.onerror = function(){
			reject();
		}
		img.src = src;
	});
	return promise;
}
var src = 'http://www.baidu.com/img/bd_logo1.png';
var result = loadImg(src);
result.then(function(img){
	console.log(img.width);
},function(){
	console.log('failed');
});
result.then(function(img){
	console.log(img.height);
});

promise语法总结：

• new Promise实例，而且要return
• new Promise 时要传入函数，函数有resolve,reject两个参数
• 成功执行resolve(),失败时执行reject()
• then监听结果