[JS] Promise (feat. 동기,비동기가 뭘까?)

Promise를 들어가기 앞서 , 우리가 알아야할 것은 비동기 이해이다.

 

 

비동기

- 비동기 실행이란 순차적으로 수행이 완료되면 다음수행이 실행되는 것이 아니라 

동작이 완료되지 않아도 다음코드가 실행되는 것을 의미 한다. 

 

- 자바스크립트 엔진은 한 번에 하나의 태스크만 실행 할 수 있는 싱글 스레드 방식으로 동작한다.

 

- 싱글 스레드를 가지면서도 비동기로 동작할 수 있는 원리는 브라우저에 있는 Web API가 멀티 스레드로 동작하기 때문이다.

 

출처 : 제코베

 

1.  JS엔진의 콜 스택에 실행될 함수가 쌓인다.

 

2. 비동기로 실행될 경우 Web API를 호출한다.

 

3. Web API에선 콜 스택이 비면 콜백 큐 함수를 꺼내 콜 스택에 넣는다.

 

4. 이벤트루프와 콜백 큐 때문에 콜 스택이 하나여도 비동기 동작이 가능하다.

 

 

 

비동기 처리가 중요한 이유 ?

 

 Q1. 웹에서 서버에 데이터를 요청 했을때 요청이 완료되기 전까지 아무것도 실행되지 않는다면 ?

- 화면이 멈춰보이고 , 하나의 프로그램을 실행하는데 많은 시간을 소요한다 .

 

 Q2 .서버에 요청한 데이터 값을 이용해 코드가 처리된다면 ?

- 실행 순서가 중요하다

 

이런 경우때문에 비동기 처리는 필요하다.

 

 

비동기 처리 함수 종류

1. 타이머 함수 : setTimeout , setInterval

2. HTTP 요청

3. 이벤트 핸들러

 

 

비동기 처리의 종류

1. promise

2. await / async

3. fetch 

 

이 글에서는  Promise에 대해 알아보겠다.

 

---

프로미스(Promise)

 

- 콜백함수로 비동기를 수행할 수 있지만 코드의 가독성이 떨어지고, 코드 수정이 어렵다.

 

 

[콜백 지옥 예시]

 

setTimeout(
    (name) => {
    let snackList = name;
    console.log(snackList);

        setTimeout(
                (name) => {
                    snackList += ', ' + name;
                    console.log(snackList);

                        setTimeout(
                                (name) => {
                                snackList += ', ' + name;
                                console.log(snackList);

                                setTimeout(
                                        (name) => { 
                                        snackList += ', ' + name;
                                        console.log(snackList);

                                    }, 500, '다쿠아즈');

                            }, 500,'초코롤');

                }, 500, '마카롱');

}, 500, '파운드');

 

 따라서 이런 콜백 지옥을 해결하기 위해 만들어 주는것이 promise다.

 

 

Promise의 상태종류

1.  pending (대기)  -  resolve (해결)  - fulfilled (성공)

2.  pending (대기) -  reject (거부)  - rejected (실패)

 

출처 : 알잘딱깔쎈 JS

 

 

[ 예제-1 ]

let p = new Promise(function(resolve, reject) {
    resolve('hello world');
}).then(메시지 => {
    alert(메시지);
    return 메시지.split(' ')[0]
}).then(메시지 => {
    alert(메시지);
    return 메시지[0]
}).then(메시지 => {
    alert(메시지);
});

 

resolve되었을때 then을 순차적으로 실행한다.

 

[결과] hello world - hello - h

 

 

[ 예제-2 ]

let p = new Promise(function(resolve, reject) {
    // resolve('hello world');
    reject('hello world');
}).then(메시지 => {
    alert(메시지);
    return 메시지.split(' ')[0]
}).then(메시지 => {
    alert(메시지);
    return 메시지[0]
}).then(메시지 => {
    alert(메시지);
}).catch(메시지 => {
    alert('catch 실행!! :' + 메시지);
});

 

reject되었을때 catch로 넘어간다.

 

[결과] catch 실행 !! : hello world

 

 

finally

finally란 성공이든 실패든 무조건 마지막에 호출되는 메서드이다.

 

 

[ 예제 -1 ]

//제작코드(producing code)
const promise = new Promise((resolve, reject) => {
	setTimeout(() => {
		reject(new Error('에러'));
	}, 3000)
});

//소비코드(consuming code)
promise
	.then(value => {
		console.log(value);
	})
	.catch(error => {
	  console.log(error);
	})
	.finally(() => {
		console.log('끝');
	});

 

3초뒤 reject 되면서 catch로 가서 error가 출력되고 , 마지막으로 finally가 실행되어 "끝"이 출력된다.

 

 

 

 

 

[정리]

제작코드	시간이 걸리는 일을 한다. (원격에서 스크립트 불러오기 등)	const promise = new Promise((resolve, reject) => {                           .... }
소비코드	제작코드의 결과를 기다렸다가 이를 소비	소비함수 메서드 : then, catch, finally ex )   promise.then(value => { console.log(value); });
프로미스	제작코드와 소비코드를 연결해주는  자바스크립트 객체	Promise

 

 

다음은 async / await에 대해 알아보겠다.