JavaScript

[JS] Promise

matt5659 2022. 1. 30. 17:23

미안하다 이거 보여주려고 어그로끌었다.. 

이 글 전에 비동기 처리에 관한 글을 썼는데, 사실 promise에 대해 작성하기 위해 사전 지식으로 쓴 글이였다..
([JS] 비동기 처리(Asynchronous))

promise란?

한마디로 표현하자면, 프로미스는 자바스크립트 비동기 처리에 사용되는 객체
  • 비동기 처리 : 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 처리 방식

promise를 사용하는 이유

프로미스는 JS에서 비동기 처리 시 조금 더 가독성 좋고 편리하게 사용하기 위해 사용되는 객체이다.

Promise를 사용하지 않은 비동기 처리
Promis를 사용한 비동기 처리

위와 같이 Promise를 사용하지 않은 코드를 Promise를 사용하여 구현할 경우, 좀 더 코드가 명확해지고 가독성이 좋아지는 것을 확인할 수 있다.

promise의 3가지 상태(states)

프로미스는 생성되고 종료될 때 까지 총 3가지의 상태를 갖는다.

  • Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
  • Fulfilled(이행) : 비동기 처리가 완료되어 프로미스 결과 값을 반환해준 상태
  • Rejected(실패) : 비동기 처리에 실패하거나 오류가 발생된 상태

 

Pending

new Promise() 가 호출되면 대기(pending)상태가 된다.
new Promise() 호출 시 콜백 함수를 선언할 수 있고, 콜백 함수는 resolve, reject를 인자로 가질 수 있다.

Fulfilled

여기서 콜백 함수의 인자 resolve를 실행하면 이행(fulfilled) 상태가 되며, then()을 사용하여 결과 값을 받을 수 있다.

Rejected

콜백 함수의 reject를 호출하면 실패(rejected) 상태가 되며, catch()를 사용하여 받을 수 있다.