es6(基礎十七) Promise

一、作用:解決異步編程的一種方案,讓異步編程寫法感覺像是同步

二、用法

new Promise(function(resolve,reject){
		resolve()
	}).then(function(){//成功.
	
	},function(){//失敗
	
	}).then(function(){//成功
	
	},function(){//失敗
	
	})

    es6之前的回調函數

{
	let fn = function(callback){
		console.info('111')
		setTimeout(function(){
			callback()
		},1000)
	}
	fn(function(){
		console.info("2323")
	})
}

回調套着回調多的情況下,代碼就會嵌套很多層,比較亂

    採用Promise

{
	let fn = function(){
		return new Promise((resolve,reject)=>{
			console.info("aaa")
			setTimeout(()=>{
				resolve()
			},1000)
		})
	}
	fn().then(()=>{
		console.info("bbb")
	})
}
{
	let fn = ()=>{
		return new Promise((resolve,reject)=>{
			setTimeout(()=>{
				resolve("張三");
			},1000)
		})
	}
	fn().then(function(data){
			return new Promise((resolve,reject)=>{
				setTimeout(()=>{
					reject();
				},1000)
			})
		}
	).then(function(){
		console.info("1")
	},function(){
		console.info("2")
	})
}
{
	let loadImg = function(srcURL){
		return new Promise((res,rej)=>{
			let imgs = document.createElement("img");
			imgs.src = srcURL;
			imgs.onload = function(){
				res(imgs)
			}
		})
	}
	//多個操作一起完成後回調
	Promise.all([loadImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522564091129&di=c042d7ee514796ac8e875a92d487dfbd&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F010a1b554c01d1000001bf72a68b37.jpg%401280w_1l_2o_100sh.png'),
		loadImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522564344979&di=9087da918e46807330109aedc85944c6&imgtype=0&src=http%3A%2F%2Fimg.taopic.com%2Fuploads%2Fallimg%2F120727%2F201995-120HG1030762.jpg'),
		loadImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522564091129&di=c042d7ee514796ac8e875a92d487dfbd&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F010a1b554c01d1000001bf72a68b37.jpg%401280w_1l_2o_100sh.png'),
		loadImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522564091129&di=c042d7ee514796ac8e875a92d487dfbd&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F010a1b554c01d1000001bf72a68b37.jpg%401280w_1l_2o_100sh.png')]
	).then(function(img){
		img.forEach(item=>{
			document.body.appendChild(item);
		})
	})
}
{
	let loadImg = function(srcURL){
		return new Promise((res,rej)=>{
			let imgs = document.createElement("img");
			imgs.src = srcURL;
			imgs.onload = function(){
				res(imgs)
			}
		})
	}
	//完成一個就回調
	Promise.race([loadImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522564091129&di=c042d7ee514796ac8e875a92d487dfbd&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F010a1b554c01d1000001bf72a68b37.jpg%401280w_1l_2o_100sh.png'),
		loadImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522564344979&di=9087da918e46807330109aedc85944c6&imgtype=0&src=http%3A%2F%2Fimg.taopic.com%2Fuploads%2Fallimg%2F120727%2F201995-120HG1030762.jpg'),
		loadImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522564091129&di=c042d7ee514796ac8e875a92d487dfbd&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F010a1b554c01d1000001bf72a68b37.jpg%401280w_1l_2o_100sh.png'),
		loadImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522564091129&di=c042d7ee514796ac8e875a92d487dfbd&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F010a1b554c01d1000001bf72a68b37.jpg%401280w_1l_2o_100sh.png')]
	).then(function(img){
		document.body.appendChild(img);
	})
}





發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章