Promise 객체

캡틴판교님의 포스트를 보며 공부한 내용을 정리한 글 입니다.

 

자바스크립트에서 말하는 비동기 처리란, 특정 코드의 연산이 끝날 때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 말한다.

 

예시 : setTimeout, 제이쿼리의 ajax 통신

(참고 : https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/ )

 

비동기 처리에서 발생할 수 있는 문제를 해결하기 위해 콜백함수를 쓸 수 있다. 콜백함수를 사용하면 특정 로직이 끝났을 때 원하는 동작을 실행시킬 수 있다. 하지만 비동기 처리를 위해 콜백함수를 연속적으로 쓰다보면 콜백지옥이 생긴다. 콜백지옥을 해결하기 위한 방법이 Promise나 Async를 이용하는 방법이다.

 

프로미스는 자바스크립트 비동기 처리에 사용되는 객체. 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용함.

프로미스를 사용할 때 먼저 알아야 하는 것, 프로미스의 3가지 상태.

- pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태

- fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태

- rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

 

new Promise()를 호출하면 우선은 대기(pending) 상태가 된다. new Promise()를 호출할 때 콜백함수를 선언할 수 있고, 콜백함수의 인자는 resolve, reject이다.

콜백함수의 인자 resolve를 실행하면 fulfilled(이행) 상태가 된다. -> then()을 이용해서 처리 결과 값을 받을 수 있다.

콜백함수의 인자 reject를 실행하면 rejected(실패) 상태가 된다. -> catch()를 이용해서 처리 결과 값(실패 처리의 결과 값)을 받을 수 있다.

 

프로미스 코드를 작성할 때 어떤 조건(서버에서 받아오는 데이터의 종류 / 데이터를 잘 받아왔는지 여부 등)에 따라 resolve 또는 reject가 실행되는 상황을 구분해 놓으면, 호출된 메서드에 따라 then 이나 catch로 분기하여 응답 결과(처리 결과 값) 또는 오류(실패 처리의 결과 값)를 받을 수 있다.

 

프로미스의 또 하나의 특징, 여러 개의 프로미스를 연결할 수 있다. then() 메서드를 호출하면 새로운 프로미스 객체가 반환된다. 때문에 then()을 이어서 사용할 수 있다.

 

프로미스 에러 처리는 catch를 사용하는 것이 권장되는 방식이다. then()으로도 할 수는 있다. then의 두 번째 인자로 에러를 처리하는 코드를 써주면 되는데, 이런 경우 만약 then의 첫 번째 인자에서 에러가 나면 제대로 에러 처리를 할 수 없다.