ES6 (3) : Promise

7) 비동기 함수

 

(1) 비동기 처리

작업 시간을 많이 요하는 작업을 처리하는 동안 다른 작업들이 대기 상태인 경우,

다른 작업들을 먼저 진행하고 오래 걸리는 작업과 그 작업에 관련된 작업을 이후에 처리하는 방식.

 

(2) 프로미스(Promise)

 

✍🏻 프로미스의 상태 세 가지

• 대기중: 결과를 기다리는 중
• 처리됨 - 이행됨: 수행이 정상적으로 끝남. 결과값을 갖고 있음
• 처리됨 - 거부됨: 수행이 비정상적으로 끝남.

 

① 프로미스 생성: new 키워드로 생성.

② Promise.resolve 생성: 이행됨 상태인 프로미스 생성

③ Promise.reject 생성: 거부됨 상태인 프로미스 생성.

④ then : 처리됨 상태가 된 프로미스를 처리할 때 사용하는 메소드.

 

 

기존의 비동기 함수:

function work1(onDone) {
	setTimeout ( () => onDone('작업1 완료.'), 100);
}
function work2(onDone) {
	setTimeout ( () => onDone('작업2 완료.'), 200);
}
function urgentWork() {
	console.log('긴급 작업');
}

work1(function(msg1) {
	console.log('done after 100ms: ' +msg1);
    work2(function(msg2) {
    	console.log('done after 300ms: ' +msg2);
    });
});
urgentWork();

우선 순위: (setTimeout이 걸려있지 않으므로) urgentWork() > work1 > work2

지연 작업(work1, work2, ...)의 수가 늘어날수록 콜백이 계단으로 형성: 콜백 지옥(callback hell) 발생.

 

✍🏻콜백 지옥(callback hell)

- 가독성이 떨어짐(코드가 길어진다)

- 코드 수정이 어려움

- 비즈니스 로직을 한눈에 알아보기 어려움

 

 

ES6의 비동기 처리:

const work1 = () =>
	new Promise((resolve) => {
    	setTimeout(() => resolve('작업1 완료.'), 100);
    });
const work2 = () =>
	new Promise((resolve) => {
    	setTimeout(() => resolve('작업2 완료.'), 200);
    });
const urgentWork = () => {
	console.log('긴급 작업');
}

const nextWorkOnDone = (msg1) => {
	console.log('done after 100ms: ' + msg1);
    return work2();
}
work1()
	.then(nextWorkOnDone)
    
    .then((msg2) => {
    	console.log('done after 300ms: ' + msg2);
    });
urgentWork();