[javascript] Promise란?

Promise 예제 포스팅을 읽기 전 다음 포스팅 : javascript 비동기란? 을 참고하자

 

Promise란?

Promise는 자바스크립트 비동기 처리에 사용되는 객체로 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 API를 사용합니다. 이때 데이터를 아직 받아오지 못했는데 화면에 데이터를 표시하려고 할때 발생하는 오류를 해결하기 위한 방법 중 하나이다.

 

Promise 사용법(예제)

function getSomeData(){
    return new Promise(function(resolve, reject){   //데이터를 받으면 resolve 호출 / 실패 시 reject
        resolve(result);                            //가져온 데이터 : result
    }); 
}

getSomeData().then(function(resultData){            //resolve의 결과값이 resultData로 전달
    console.log(resultData);
});

 

쉽게 new Promise()로 생성, resolve()는 결과값, then()은 Promise 실행이 완료된 후 실행을 의미한다

 

Promise's states

• 대기(Pending)
• 이행(Fulfilled)
• 실패(Rejected)

대기(Pending)는 new Promise()까지 했을때이다.

이행(Fulfilled)은 resolve();까지하여 결과를 받았을 때라고 생각한다. 이행 상태가 되면 then() 처리로 결과값을 사용 가능하다.

실패(Rejected)는 reject()를 사용하여 실패 상태로 만들었을 때이다.

 

Promise 에러 처리

Promise의 에러를 처리하는 방법은 then()을 두 번쓰거나 catch()를 이용하여 reject() 메서드가 호출되어 실패 상태가 된 경우입니다. 가급적 catch를 사용해야 한다. 이유는 then으로 처리하려면 콜백 함수 내부에서 나는 오류를 잡아낼 수 없기 떄문이다.

getSomeData().then(function(resultData){
    console.log(resultData);
}).catch(function(err){
    console.log('error : ', err);
});

 

Promise.all이란?

쉽게 예를 들면, 동시에 API에 접속해 데이터를 가져와 resolve로 반환해주는 것으로 생각한다. Promise.all() 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환합니다.

 

왜 사용할까?

그림을 보며 이해해보자.

사용 전(빨간 부분)

 

위 그림과 같이 사용 전은 위에 API를 불러온 뒤 다음에 처리한다.

사용 후

 

 위 그림은 사용 후 API를 동시에 불러오는 작업을 진행한다.

Promise.all 예제

Promise.all([p1, p2, p3]).then((values) => {
  console.log(values);
});

 

오늘 성장에 도움을 주신 개발자분

참고자료 : https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

참고자료 2 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

감사합니다.