I started Nodejs web programming and programmed as Asynchronous. after suffering the callback hell(a Pyramid of Doom) I found a solution. It is the promise, async, await concepts and wanted to get to know that things. I was wondering why do javascript need promise concept and I wanted to get to know a relationship with async, await and Promise. This slide is the first content of my question, why need promise concept?

1. Promise, Async And Await
1. Promise in Javascript

2. 서버 프로그래밍 중
[장점] 비동기
[단점] ES5 콜백 지
옥
ES7
Async
Await
ES6
Promise
해결

3. ES7
Async
AwaitPromise
 Promise?
Promise의 어떤 점을 보완하기 위해
Async와 Await가 나오게 됐을까??
 Promise, Async, Await 사이의 관계
는???

4. Promise
먼저, Promise에 대해서 알아보자

5. 콜백 헬과의 비교
ES5 callback과 promise
Promise란?
Promise Terminology
Example
단점
차례

6. Promise를 사용하면 콜백 헬과 무슨 차이가 있을까?

7. 콜백 헬과의 비교
function sqlQuery() {
let sql: string = 'SELECT * FROM members WHERE username=?';
let currentList = 0;
conn.query(sql, username, (err, rows, fields) => {
if (err) {
console.log(err, 'nresgister post sql1 ');
res.status(500).send('Internal Server Error_ query1');
} else {
if (rows.length === 0) console.log(`해당 유저가 존재하지 않습니다.`);
else {
// language=MySQL
let sql2 = 'INSERT INTO members (username, password, displayName) VALUES(?,?,?)';
let params = [username, password, displayName];
if (err) {
console.log(`회원가입 해셔 안, err : ${err}`);
res.status(500).send('Internal Server Error_ query1');
} else {
conn.query(sql2, params, (err, add_data, fields) => {
if (err) {
res.status(500).send('Internal Server Error2');
} else {
req.session.displayName = displayName;
req.session.save(() => {
res.redirect('/');
});
}
});
}
}
}
});
}
function sqlQuery() {
let sql: string = 'SELECT * FROM members WHERE username=?';
let currentList = 0;
let pSql1 = new Promise(((resolve, reject) => {
conn.query(sql, username, (err, rows, fields) => {
if (err) reject(err);
else {
if (rows.length === 0) console.log(`해당 유저가 존재하지 않습니다.`);
else {
resolve(rows);
}
}
});
}));
pSql1.then(value => {
// language=MySQL
let sql2 = 'INSERT INTO members (username, password, displayName) VALUES(?,?,?)';
let params = [username, password, displayName];
conn.query(sql2, params, (err, add_data, fields) => {
if (err) {
res.status(500).send('Internal Server Error_ query1');
} else {
req.session.displayName = value[0].displayName;
req.session.save(() => {
res.redirect('/');
});
}
});
});
}
해당 유저의 database data를 추출하기 위한 코드를 중첩 callback과 promise를 이용하여 구현해보았습니다.

8. ES5 callback과 Promise
비동기 처리 중 발생한 오류 예외
처리의 까다로움
순차 처리시, 중첩된 callback을
이용하면 code depth가 깊어짐
코드의 복잡성 증가
코드의 가독성 감소
Promise 생성시 등록하는 함수
인 reject를 통해
error handling이 쉬워짐
중첩된 callback을 만들지 않도
록 하여 code depth가 얕아짐
비동기 callback 함수의 패턴이
정해져 코드 복잡성 감소
비동기 callback 함수의 패턴이
정해져 코드 가독성 증가
ES5 ES6

9. Promise 란?_1
Definition
비동기 연산을 위한 정해지지 않은, 후에 완료될 것으로 기대되는 연산 표현인 Javascript의 객체
Syntax
new Promise( /* executor */ function(resolve, reject) { ... } );
States
기본적으로 pending(대기중), fulfilled(이행됨), rejected(거부됨)의 상태를 가짐
도식 출처 : developer.mozilla.org

10. p1.then(value =>
{…});
실행
State : Fulfilled
p1.catch(reason =>
{…});
실행
State : Rejected
Promise 란?_2
Promise는 ‘then’ method를 통해 콜백 등록 등의 접근이 가능
then method를 통해 현재와 이후의 값이나 rejected된 이유에 대해서 접근할 수 있습니다.
promise.then(onFulfilled, onRejected)
도식 출처 : developer.mozilla.org
F resolve
F reject
let p1 = new Promise(((resolve, reject)
=> { … }));
p1.then(value => {
log.insertAdjacentHTML( … );
}).catch(reason => {
console.log('Handle rejected
promise('+reason+') here.');
});
Promise resolve function(resolve)
Promise reject  function(reject)

11. Promise Terminology
Pending
Fulfilled
Rejected
resolved
초기 상태, 이행 또는 거부되지 않
음
Promise 관련 작업이 성공
Promise 관련 작업 실패
다른 promise 에 연결하거나 이미 fulfilled or rejected된 상태인 경
우
unresolved Resolve 또는 rejected 상태로 try하는 중
,If promise.then(f) will call f.
,If promise.then(undefined, r) will call r.
,If it is neither fulfilled nor rejected.
Settled 처리되거나 거부됨
thenable then method를 가짐
용어 참고 : States and Fates

12. Example
Make a promise!
testPromise 함수가 onclick 이벤트로 등록된
Page의 button을 누르면,
Promise button 을 누른 차례의 숫자를 출력하
는 log 함수 실행의 시작과 끝, promise에 등록
된 resolve 함수가 실행되는 Async의 시작과 끝
이 출력됩니다.
출처 : developer.mozilla.org example

13. Example
F testPromise()
Make a promise!
F testPromise()F testPromise()F testPromise()
Sequential Html log start and promise
made, Html log end fufilled
No.? Promise fulfilled
No.? Promise fulfilled
No.? Promise fulfilled
No.? Promise fulfilled
Sequential Html log start and promise
made, Html log end fufilled
Sequential Html log start and promise
made, Html log end fulfilled
Result

14. Promise 단점
 Promise가 순환 thenable chain에 갇
히게 되면 무한 재귀가 발생합니다.
 권장하진 않지만, TypeError를 통
해 promise를 reject하여 찾아낼
수 있습니다.
 Promise.prototype.then() 및
Promise.prototype.catch() 메서드
가 프로미스를 반환하기에, chain
이 생길 수 있음
 Promise가 ‘비동기를 동기처럼 보이
게 만들었다’라고는 볼 수 없음
 Promise를 통해 복잡한 데이터
처리를 할 때엔 동기 작업이 가
독성이 높을 때가 있는 경우가
있음
 위 같은 경우처럼 promise만으
로 동기적으로 동작하는 것 처럼
보이는 비동기 작업을 하기엔 무
리
주의점 참고 : developer.mozilla.org

15. Thank you
임남욱 (limnamwook@gmail.com)