TIL no.38 - Promise 란 무엇인가 ? 개념 정리와 이해

Promise 는 자바스크립트 비동기 처리에 사용되는 객체입니다.

*비동기 처리란 특정 코드의 실행이 완료 된 후에 다음 코드를 실행하는 것이 아니라 특정 코드의 실행이 되는 동안에 다음 코드를 수행하는 자바스크립트의 특성을 말합니다.

 

콜백을 쓰지 않고 비동기 코드를 깔끔하게 구현하기 위해서 Promise를 사용합니다.

에러를 콜백함수로 길게 처리하지 않고 promise안에 있는 resolve, reject를 통해 깔끔하게 에러 처리할 수 있습니다.

 

 

 

Primise 는 서버에서 받아온 데이터 API를 연결할 때 쉽게 볼 수 있는데요.

만약에 Get method를 이용해 API를 받아오고 받아온 API key를 이용해서 함수가 작동된다고 생각해봅시다.

자바스크립트의 비동기 처리에 따르면 API 데이터를 가져오는 동안에 다음 코드를 읽어내므로

데이터가 들어오지 않은 부분에서는 undefined 가 뜨거나 오류가 발생합니다.

이와 같은 문제점을 비동기 처리로 해결할 수 있는 것이 바로 Promise 입니다.

 

Promise 함수는 resolve와 reject 함수를 인자로 전달받습니다.

const promise = new Promise((resolve, reject) => {

if (response) {
	resolve('success');
} else {
	reject('failed');
}
});

기능을 정상적으로 수행해서 마지막에 최종 데이터를 전달하는 콜백함수 resolve

문제가 생기면 호출하게 될 reject

 

promise 를 만드는 순간 우리가 만든 executor 코드가 발생합니다.

사용자가 버튼을 눌렀을 때 네트워크를 요청해야 하는 경우라면 불필요성이 발생합니다.

새로운 promise가 만들어질 때는 executor 함수가 자동적으로 바로 실행됩니다. 이점 유의 !

 

 

 

Promise는 3가지 상태를 가집니다.

- 처리 대기 (pending)

- 처리 완료 (fulfilled)

- 처리 실패 (rejected)

 

먼저 처리 대기 상태를 가진 후 처리 완료 즉, 이행이 된다면 then()을 이용하여 처리 결과 값을 반환할 수 있습니다.

반면에 실패 된다면 실패한 이유와 에러 상태를 catch()로 받을 수 있습니다.

 

Promise 는 여러 개의 Promise 로 연결할 수 있습니다.

getData() 를 실행하고 그 뒤에 

.then()

.then()

.then() 

방식을 이용하여 여러 번의 Promise 처리를 할 수 있습니다.

보통 순차적으로 data를 넘겨받아야 할 때 이런 방식으로 여러 번의 Promise 를 사용합니다.

 

또한 성공과 실패 처리를 then 으로 모두 처리 할 수도 있으며,

then()으로 성공 시 호출하고 예외 처리를 catch()로 에러를 호출 받을 수 있습니다.

 

후자가 더 효율적으로 사용된다고 합니다.

 

Promise는 현재에도 많이 사용되고 앞으로도 많이 사용될 것이라 더 잘 알아두는 것이 좋습니다.

저도 정확한 이해보다는 개념을 이해한 정도라서 사용해보면서 더 깊이 있는 이해가 필요할 것 같습니다.

제가 제 코드를 작성하면서 이해가 더 잘 되는 예시를 찾으면 수정하도록 하겠습니다.