[Javascript] Promise 맛보기

1. 프로미스란?

프로미스란 비동기처리를 효과적으로 처리해 줄 수 있는 장치이다. 그냥 콜백함수만 썼을 때 보다 코드가 옆으로 길어지지 않아 보기에도 편하고, 유지보수도 쉽다.
보통 데이터를 가져오거나, 시간이 오래걸리는 연산을 한다거나 할 때 사용된다.
프로미스는 연산의 성공과 실패를 판정한다. 성공과 실패에 따라 각기 다른 동작을 시행할 수 있게 해준다.

2. 프로미스 생성

프로미스는 객체로 생성자함수를 사용하여 변수에 저장하여 사용된다.
프로미스의 인자로 함수를 받는다. 이 함수는 위에서 말했듯 데이터를 받아오거나 시간이 오래걸리는 작업을 하는 함수이다.
여기서는 setTimeout을 사용하여 임시로 활용해보겠다.

const getData = new Promise(function(resolved, rejected){
  setTimeout(function(){
  	resolved();
  }, 3000)
});

다음과 같이 Promise를 선언한다. Promise선언시에 인자로받는 executor함수는 인자로 두개를 받는데 첫 번째 인자는 함수 내부의 연산이 성공적으로 실행되었을 때 반환할 때, 두 번째 인자는 함수 내부의 연산이 실패했을 때 반환할 상태이다.

const getData = new Promise(function(resolved, rejected){
  setTimeout(function(){
  	rejected();
  }, 3000)
});

다음과 같이 작성한다면 3초뒤에 내부의 함수를 실패로 판정한다.

*Promise생성시에 인자로 받는 함수는 생성과 동시에 동작을 시행하므로, 특정동작시에 데이터를 받아오거나 연산을 하고자한다면 주의해서 사용해야한다!!

3. 프로미스의 사용

프로미스의 사용은 then과 catch, fianlly를 사용한다.
then은 promise가 성공판정을 할 때에 동작, catch는 promise가 실패판정을 할 때에 동작. finally는 성공과 실패 상관없이 시행할 동작인데 finally는 다루지 않겠다.

getData.then(function(value){
    console.log('loading success');
}).catch(function(){
    console.log('loading fail');
})

만둘어둔 프로미스가 성공한다면 loading success를 콘솔에 찍히고, 실패한다면 loading fail이 찍힐 것이다.

4. 프로미스의 상태

프로미스의 상태는 세가지가 있다.
판정중 pending, 성공판정 fulfilled, 실패판정 rejected

함수가 판정 중 일때는 pending, 거절된 이후에는 rejected라고 나오는 것을 확인 할 수 있다.

성공한 이후에는 위와 같이 fulfilled라고 나온다.