Javascript Promise

Promise 객체는 자바스크립트 비동기 처리에 사용됩니다. Javascript에서는 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 비동기 처리라고 합니다.

간단한 예시

서버에서 기사 정보를 받아와서 랜더링 하는 코드입니다. 이와 같은 경우에는 서버로 부터 기사 정보를 받은 뒤 랜더링을 해야됩니다. 하지만 자바스크립트는 바로 다음 코드를 실행시키게 됩니다.

let response = fetch("/article/fetch/post/user");
console.log(response)

기사 정보가 로그에 찍히길 기대와는 다르게 Promise 객체가 찍히는 걸 볼 수 있습니다. 기사 정보를 가져오는 처리를 기다리지 않고 바로 log 함수를 실행시키기 때문인데요. fetch() 함수는 프로미스 객체를 리턴하는데 이 객체가 그대로 로그에 찍히게 된 것입니다. 통신 한 뒤 응답받은 데이터를 이용하는 상황에선 비동기 처리가 필수입니다. 통신하고 데이터를 응답 받을 때 까지 기다려야 하기 때문인데요. MDN에서 Promise 설명을 찾아보면 _프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다._라고 적혀 있습니다. 어떻게하면 이 Promise 객체를 이용하여 동기 처럼 처리 할 수 있을까요?

프로미스의 상태

프로미스는 3가지의 상태(state)를 가집니다. 이 상태는 처리 과정마다 변경됩니다. 프로미스는 생성되어서 종료될 때 까지

• 대기(pending): 이행하거나 거부되지 않은 초기 상태.
• 이행(fulfilled): 연산이 성공적으로 완료됨.
• 거부(rejected): 연산이 실패함.

pending 상태인 프로미스는 값과 함께 Fullfill 상태로 변할 수도 어떤 이유(오류)로 인해 reject 상태로 될 수 있습니다. 이 값들은 모두 프로미스의 then 메서드에 의해 대기열에 오릅니다. 여기서 에러가 발생한다면 catch 메서드에 오르게 됩니다.

사용 예시

var response = fetch("/article/fetch/post/user");
response
    .then((res) => console.log(res))
    .catch((err) => console.log(err));

프로미스 객체의 then 메소드로 응답받은 데이터가 로그로 찍히는 모습을 확인 할 수 있습니다. 만약 HTTP 통신 시에 오류가 발생한다면 catch 메소드로 처리 될 것 입니다. 즉 호출된 메서드에 따라 then()이나 catch()로 분기하여 응답 결과 또는 오류를 출력합니다.

Refs

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise