[JavaScript] 프로미스(Promise)

 

 

1. 동기식 처리 모델과 비동기식 처리 모델

 

1) 동기식 처리 모델(Synchronous processing model) 

- 직렬적으로 태스크(task) 수행

- 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 태스크는 대기

ex.  서버에서 데이터를 가져와서 화면에 표시하는 태스크를 수행할 때, 서버에 데이터를 요청하고 데이터가 응답될 때 까지 이후의 태스크 들은 블로킹 됨

 

 

2) 비동기식 처리 모델(Asynchronous processing model, Non-Blocking processing model)

- 병렬적으로 태스크(task) 수행

- 태스크가 종료되지 않은 상태라 하더라도 대기하지 않고 즉시 다음 태스크 실행

- 자바 스크립트의 대부분의 DOM 이벤트와 Timer함수(setTimeout, setInterval), Ajax 요청은 비동기식 처리 모델로 동작함

- 자바스크립트 비동기식 처리모델은 요청을 병렬로 처리하여 다른 요청이 블로킹되지 않는 장점이 있음

ex. 서버에서 데이터를 가져와서 화면에 표시하는 태스크 수행 시, 서버에 데이터를 요청한 이후 서버로부터 데이터가 응답될 때까지 대기하지 않고(Non-Blocking) 즉시 다음 태스크 수행. 이후 서버로부터 데이터가 응답되면 이벤트가 발생하고 이벤트 핸들러가 데이터를 가지고 수행할 태스크를 계속해 수행. 

 

cf) 자바스크립트는 싱글 스레드 환경에서 동작하는 프로그램 -> 백엔드에 HTTP요청을 했는데 백엔드에서 요청을 처리하는데 1분이 걸린다면 내 브라우저는 1분 간 아무것도 못하는 상태가 되는 것 -> 그래서 비동기식 처리 모델을 이용하여 처리

 

 

 

2. 비동기 오퍼레이션(Asynchronous Operation)위한 방법

 

1) 콜백 (callback)

비동기식 처리를 위해 콜백 패턴을 사용하면 처리 순서를 보장하기 위해 여러 개의 콜백 함수가 네스팅(nesting, 중첩)되어 복잡도가 높아지는 콜백 헬 발생

콜백헬은 비동기 처리 모델은 실행 완료를 기다리지 않고 즉시 다음 태스크 실행, 따라서 비동기 함수 내에서 처리 결과를 반환하면 기대한대로 동작하지 않으며 가독성을 나쁘게 하며 실수를 유발하는 원인이 됨

 

 

2) 프로미스(Promise)

- 콜백 헬이라고 불리는 지저분한 자바스크립트 코드의 해결책

- 실패시 동작할 코드를 cath를 통해 작성 가능(콜백함수는 불가능함)

- 내용이 실행 되었지만 결과를 아직 반환하지 않은 객체 promise에 then을 붙이면 결과를 반환함

 

a. 문법

var 프로미스 = new Promise(); // Promise 만들기
프로미스.then(function(){ // 프로미스 안의 코드가 실행 완료 된 경우 then() 함수 내의 코드를 실행함
}).catch(function(){ // 프로미스 안의 코드가 실패 된 경우 catch() 함수 내의 코드를 실행함
});

 

b. 예제

const condition = true; // true면 resolve, falseaus reject
const promise = new Promise((resolve, reject) => {
	if(condition) {
    	resolve('성공');
    } else {
    	reject('실패');
    }
});

promise
	.then((message) => {
    	console.log(message); // 성공(resolve) 한 경우 실행
    })
    .catch((error) => {
    	console.log(error);
    }
    )

 

c. Promise의 상태

Pending

오퍼레이션이 끝나길 기다리는 상태

오퍼레이션이 성공적으로 끝나면 resolve() 함수를 통해 이 오퍼레이션이 성공적으로 끝났음을 알리고 원하는 값을 전달할 수 있음

오퍼레이션 중 에러가 나는 경우 reject()함수 호출, 그 결과로 catch 매개변수로 넘어오는 함수가 실행됨

 

Resolve

then의 매개변수로 넘어오는 함수를 실행

 

Reject

 catch 매개변수로 넘어오는 함수가 실행됨

 

Promise.resolve(성공리턴값): 바로 resolve하는 프로미스

Promise.reject(실패리턴값): 바로 reject하는 프로미스

const promise1 = Promise.resolve('성공1');
const promise2 = Promise.resolve('성공2');
Promise.all([promise1, promise2])
	.then((result) => {
    	console.log(result);
    })
    .catch((error) => {
    	console.log(error);
    }
    );

Promise.all(배열): 여러 개의 프로미스를 동시에 실행( 하나라도 실패 시 catch로 이동)

Promise.allSettled: 실패한 것만 추려낼 수 있음