new promise

promise의 가장 기본적인 형태

var job = new promise(function(resolve, reject { });

 

 

 

then 세팅

var job = new promise(function(resolve, reject) { }); //여기서 성공 / 실패 여부를 알려줘야 함.
job.then(function(data) { }) //then은 콜백 함수가 필요함. //그 콜백함수는 처리된 결과 데이터를 받는 파라미터가 필요함
							 //콜백함수의 'data' 파라미터를 어떻게 쓸지 정의해줘야함

 

 

var job = new promise(function(resolve, reject) {
	resolve('resolved ok!'}); //성공 시 실행되는 resolve 함수(promise의 콜백함수의 인자로 들어온 함수)
job.then(function(data) {	  //성공 시 실행되는 then (성공 시 resolve의 결과가 들어옴. data
	console.log('data', data) // data resolved ok! 찍힘
})

 

 

 

 

setTimeout의 콜백함수로 넣어주기

var job = new promise(function(resolve, reject) {
	setTimeout(function(){resolve('resolved ok!')
    }, 2000);  //setTimeout에 resolve 함수를 콜백함수로 넣어줌
}); 
job.then(function(data) {	  
	console.log('data', data)
})

이건 promise를 날 것 그대로 쓴 것. 보통은 어떤 함수 안에서 리턴으로 쓰임

 

 

 

 

 

 

function job1(){ //promise를 감싸는 함수 job1.
 return  new promise(function(resolve, reject) { //promise를 리턴한다
	setTimeout(function(){resolve('resolved ok!')
    }, 2000);  //setTimeout에 resolve 함수를 콜백함수로 넣어줌
});

}
job1.then(function(data) {	  
	console.log('data', data)
})

이 상태에서는 job1이 프로미스가 아니다. 함수로 호출해야 다시 프로미스가 됨 (then부분에서 호출)

 

 

 

function job1(){ //promise를 감싸는 함수 job1.
 return  new promise(function(resolve, reject) {
	setTimeout(function(){resolve('resolved ok!')
    }, 2000);  
});

}
job1().then(function(data) {	  //요기
	console.log('data', data);
})

 

 

 

 

여러개의 프로미스를 중첩해서 사용하기

function job1(){ //promise를 감싸는 함수 job1.
 return  new promise(function(resolve, reject) {
	setTimeout(function(){resolve('resolved ok!')
    }, 2000);  
});
}
function job2(){ //새로운 프로미스
 return  new promise(function(resolve, reject) {
	setTimeout(function(){resolve('resolved ok!')
    }, 2000);  
});
}
job1().then(function(data) {
	console.log('data1', data);
	job2().then(function(data){ //job1의 then에 jo2의 then이 들어옴
    	console.log('data2', data)
        })
})
//(2초 후) data1 resolved ok!
//(2초 후) data1 resolved ok!

이 then 안에 then이 들어가는 걸 네이스틱 방식이라함. 체이닝 방식을 더 선호

 

 

 

 

체이닝 방식

function job1(){ //promise를 감싸는 함수 job1.
 return  new promise(function(resolve, reject) {
	setTimeout(function(){resolve('resolved ok!')
    }, 2000);  
});
}
function job2(){ //새로운 프로미스
 return  new promise(function(resolve, reject) {
	setTimeout(function(){resolve('resolved ok!')
    }, 2000);  
});
}
job1()
	.then(function(data) {
	console.log('data1', data);
    return job2(); //then이 job2를 리턴함(프라미스를 리턴)
    })
    .then(function(data){  //리턴한 jo2의 결과값을 data로 받아 수행
    	console.log('data2', data)
        })
})
//(2초 후) data1 resolved ok!
//(2초 후) data1 resolved ok!

 

 

 

reject로 바꿔보자

function job1(){ //promise를 감싸는 함수 job1.
 return  new promise(function(resolve, reject) {
	setTimeout(function(){reject('jog1 fail!') //리젝트, 데이터 바뀜
    }, 2000);  
});
}
function job2(){ //새로운 프로미스
 return  new promise(function(resolve, reject) {
	setTimeout(function(){resolve('resolved ok!')
    }, 2000);  
});
}
job1()
	.then(function(data) {
	console.log('data1', data);
    return job2(); //then이 job2를 리턴함(프라미스를 리턴)
    })
    .catch(funciton(reason){ //catch는 reject 함수의 매개변수 'jog1 fail!'을 인수로 받을 것.
    	console.log('reason', reason);
        }) 
    .then(function(data){  //리턴한 jo2의 결과값을 data로 받아 수행
    	console.log('data2', data)
        })
})
//(2초 후) reason job1 fail!
//dat2 UNDEFINED 출력

undafined 뜨는 이유는, 마지막 then에 있는 함수도 호출이 되어서 그렇다.

 

 

 

 

 

 

reference

https://www.youtube.com/watch?v=PasFh_t1mhY&t=1s