TIL) Promise

Promise란?

 

-Promise는 주로 웹서비스를 구현 할 때 원활한 데이터 통신을 위해 활용됩니다.

-웹 페이지에서 서버로 데이터를 요청했을 때, 데이터를 모두 받기 전에 웹에 출력하려고 하는 경우를 방지하기 위해 활용

-Promise를 사용하지 않고 실행시키면 먼저 로직이 끝나는 순서로 출력이 되지만, Promise를 사용하면 순서대로 출력을 시킬 수 있습니다.

프로미스의 3가지 상태

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

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

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

 

2-1) Pending

new Promise();

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

위와 같이 Promise 객체를 생성하면 대기 상태입니다. 인자는 resolve(실행)와 reject(실패)를 가집니다.

 

2-2)Fulfilled

// resolve()를 통해 Promise 실행
function getData(){
    return new Promise( (resolve, reject) => {
      let data = 10;
      resolve(data);
    })
  }
  
getData().then((resolvedData) => console.log(resolvedData));

2-1에서 Promise 객체를 생성하고 resolve에 parameter를 넣어주면 Promise가 이행상태로 넘어갑니다.

이후 then()을 확용하면 결과 값을 받을 수 있습니다.

 

2-3) Rejected

//reject를 호출해 고의적 실패로 연결
function getData(){
    return new Promise( (resolve, reject) => {
      reject(new Error("This is rejected!"));
    })
  }
  
getData().catch((err) => console.log(err));

Promise 객체인 reject인자는 호출 시 실패 상태가 됩니다.

이후 catch()를 활용하면 결과값을 받고 예외를 확인할 수 있습니다.

 

Reference 

https://nowsun.tistory.com/17

리액트 키워드 정리 (리덕스, 미들웨어, 프로미스, axios 등)