React - Promise

Promise

Promise는 어떠한 코드를 비동기 방식으로 실행시키고 싶을 때 사용한다.

주로 서버에서 받아온 데이터를 화면에 표시 할 때 사용한다.

Promise는 다음 중 하나의 상태를 가집니다.

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

사용방법

대기

new Promise() 메서드 호출 시 콜백 함수를 선언할 수 있으며, 인자는 resolve와 reject이다.

new Promise((resolve, reject) => {
	//비동기 방식으로 실행시킬 코드
})

이행(성공)

콜백 함수 인자인 resolve를 실행하면 완료된 상태이다.

완료가 된 상태는 then()을 사용하면 결과 값을 받을 수 있다.

function promiseTest(){
  return new Promise( (resolve, reject) => {
    resolve();
  })
}

promiseTest().then(() => console.log("와~! 성공 !"))

거부(실패)

콜백 함수 인자인 reject를 실행하면 실패된 상태이다.

실패된 상태는 catch()를 사용하면 결과값을 받고 예외 처리가 가능하다

function promiseTest(){
  return new Promise( (resolve, reject) => {
    reject(new Error("Error"));
  })
}

promiseTest().catch((err) => console.log(err));

활용 방법

아래와 같이 조건문을 사용해 성공, 실패 확인이 가능하다.

function promiseTest(num){
  return new Promise( (resolve, reject) => {
    if(num > 5) resolve();
    else reject();
  })
}

setTimeout(() => {
  promiseTest(6)
  .then(() => console.log("1 : 성공!"))
  .catch(() => console.log("1 : 실패!"))
  
  promiseTest(4)
  .then(() => console.log("2 : 성공!"))
  .catch(() => console.log("2 : 실패!"))
}, 1000)

promise는 axios나 thunk와 같은 api를 호출할 때 사용한다고 한다.