Promise 사례

14668 단어
function bigHouse(){
			return new Promise(function(resolve,reject){
				setTimeout(function(){
					var n=Math.random();
					if(n>.5){
						resolve(" ")
					}else{
						reject(" , ")
					}
				},2000)
			})
		}
		bigHouse()
		.then(res=>{
			console.log(res)
		})
		.catch(err=>{
			console.error(err)
		})

그림 순서 로드

  • 버튼을 클릭하여 로드
  • <button type="button" id="btn"> </button>
    var pics = [
    		    "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7bc54a61b927dd8c54ddd39a0acf0254.jpg?w=632&h=340",
    		    "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/94c74e01afe50a86c3a87ff030b85781.jpg?w=632&h=340",
    		    "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340"
    		
    		]
    		function loadImage(url){
    			return new Promise(function(resolve,reject){
    				var img=document.createElement("img")
    				img.src=url;
    				img.onload=function(){resolve(img)}
    				img.onerror=function(e){reject(e)}
    			})
    		}
    btn.onclick=function(){
    			loadImage(pics[0])
    			.then(res=>{
    				document.body.append(res)
    			})
    			.catch(err=>{
    				console.log(err)
    			})
    		}
    		loadImage(pics[0])
    		.then(res=>{
    			document.body.append(res)
    			return loadImage(pics[1])
    		})
    		.then(res=>{
    			document.body.append(res)
    			return loadImage(pics[2])
    		})
    		.then(res=>{
    			document.body.append(res)
    		})
    		.catch(err=>{console.log(err)})
    
  • 가장 빠른 Promise 결과 - Promise를 반환합니다.race
  • //Promise.race Promise 
    		Promise.race([loadImage(pics[0]),loadImage(pics[1]),loadImage(pics[2])])
    		.then(res=>{
    			document.body.append(res)
    		})
    
  • 등 두 개 이상의 ajax 데이터가 돌아와야 정상적으로 표시됩니다. - Promise.all
  • Promise.all([loadImage(pics[0]),loadImage(pics[1]),loadImage(pics[2])])
    		.then(res=>{
    			for(var k in res){
    				document.body.append(res[k])
    			}
    		})
    

    좋은 웹페이지 즐겨찾기