javascript promise pattern study

1. Promise에 대한 고찰
Pin the Cloud
유홍근

2. Promise 패턴이란
new Promise(function(fulfill, reject) {
mssql.query(“SELECT * …”, {
// async callback
success: function(results) {
// tell Promise obj that async task is done
fulfill(results);
}
});
}).done(function(results){
// do some post work after async task is done
results……….
});
참고 페이지 : https://www.promisejs.org/

3. Promise의 장점
• Inner block을 없애준다.
• Async 작업을 synchronous하게 만들어준다.
(개발의 흐름이랑 실제 코딩이랑 맞춰준다.)
• 스파게티 코드 없애줌. (Dependency 줄여줌)
• 현재 크롬 브라우저 경우는 언어 차원에서
지원해주는거 같음. (라이브러리 안써도
잘됨)

4. Compare with Async Chainer
asyncChariner.async([
function() {
asyncChainer.executeAsync(result);
}, function(result) {
…..
asyncChainer.executeAsync(val);
}, function(val) {
// end of async chain
}
]);
new Promise(function(fulfill, reject) {
mssql.query(“SELECT * …”, {
// async callback
success: function(results) {
fulfill(results);
}
});
}).then(function(results){
results……….
return val;
}).then(function(val){
val…..
});

5. Promise 핵심 원리
• Spring Framework 에서 나오는 Ioc/DI와
상당히 비슷한 개념으로 이해하면 쉬움.
• Inversion of callback (내가 만든 용어임ㅋㅋ)
• 혹은 Callback of callback (이것뚜ㅋㅋㅋ)
caller()
callee()
callback callback
callback
of
callback
caller()
callee()

6. Source code
// inversion of callback
function callee(callback) {
// callback func has a callback
callback(function(param){
console.log(param);
});
}
function caller() {
// caller calls callee
callee(function(func){
// the param of the callback is
a function
func(123);
});
}
// also prints 123
// typical callback function
function callee(callback) {
callback(123);
}
function caller() {
// caller calls callee
// in our case,
mssql.query()
callee(function(result){
// in callback func
console.log(result);
});
}
// prints 123

7. 핵심 원리 (Cont.)
• 콜백 함수의 파라미터 값이 function이고,
콜백 호출시 파라미터로 받은 함수를
호출하게 되면 callback of callback이 된다.
• (중요)이를 통해 콜백 함수(callee)가 호출된
시점을 다시 콜백 함수를 호출 시킨
함수(caller)에 알려줄 수가 있다!!
• 그렇게 되면 다음 순서의 async task 호출
시점을 알 수 있게 된다. (문제 해결)

8. 그림으로 Async Chainer 비교
AsyncChainer
객체
Callback
(End of async task)
Next Registered
Async Task
나
끝났음~
그래?
알겠음~
다음 차례
시작하셈~
ㅇㅋ
AsyncChainer 객체한테 알려주면 그 객체가 직접 다음 작업을
호출한다.

9. 그림으로 Async Chainer 비교
Callback
(End of async task)
Next Registered
Async Task
callback
Callback of Callback
(implement in Promise)
callback of callback

10. 개인적인 의견
• 결국엔 객체를 통해서 다음 작업을 호출
시점을 정하느냐 함수를 통해서 하냐
차이인듯.
• Functional Language의 특성을 백분 활용한
기법인거 같다는 생각.
• 객체지향에서는 가능하지 않는(어쩌면
람다를 통해서 가능한데 힘든) function
language의 위력을 깨닫는 공부였음.