JS : 비동기 처리 & 콜백 공부 II

Promise (참고)

프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 어떤 함수를 실행할 때, 나중에 이어지는 메소드들을 실행하기로 약속(프로미스)하는 것으로 이해하면 될 것 같습니다.

 

new Promise(resolve, reject)를 통해 선언할 수 있으며, 선언된 결과에 맞는 resolve와 reject인자를 사용할 수 있습니다. 프로미스 객체는 세 개의 상태를 가지고 있는데, Pending(대기), Fulfilled(이행), Rejected(실패)로 나누어 집니다.

 

Pending, Fulfilled, Rejected

프로미스를 처음 선언하면, 해당 메서드는 대기 상태가 됩니다. 프로미스 메서드를 호출할 때, 콜백 함수를 선언할 수 있는데, 이 콜백 함수의 인자는 성공시(resolve), 실패시(rejected)로 나누어 선언할 수 있습니다.

 

콜백 함수의 인자 resolve를 실행할 경우, 이행 (fulfilled)상태가 되어, .then()을 사용하여 처리 결과값을 가져오거나 이후에 이어질 함수를 정의할 수 있습니다.

 

마찬가지로, 콜백 함수의 인자 reject를 통해 프로미스가 실패된 경우에는, 프로미스는 rejected 상태가 되며 then이 아닌 catch()를 사용하여 에러를 핸들링할 수 있습니다.

 

예제

const getData = () => {
	return new Promise = (resolve, reject) => {
  		$.get('url/products/1', function(response) {
        	if (response) {
            	resolve(response);
            }
            reject(new Error('error'));
        }
    };
};

getData.then(function(data) { //성공일 경우 response값 출력)
	console.log(data);
}).catch(function(err){ //실패일 경우 error값 출력
	console.error(err);
});

 

Promise Chaining

프로미스는 여러 개의 프로미스를 연결하여 사용할 수 있다는 특징이 있습니다. 첫 프로미스에서 리턴된 값으로 then을 수행하고, 여기서 리턴된 값으로 그 다음 .then을 실행합니다.

new Promise(function(resolve, reject){
  setTimeout(function() {
    resolve(1);
  }, 2000);
})
.then(function(result) {
  console.log(result); // 1
  return result + 10;
})
.then(function(result) {
  console.log(result); // 11
  return result + 20;
})
.then(function(result) {
  console.log(result); // 31
});

 

Promise.all()

여러 개의 프로미스를 한 번에 실행하고, 결과값을 배열 형태로 리턴합니다.

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// expected output: Array [3, 42, "foo"]

다음 게시물에서는 또다른 비동기 처리 방법인 Async & await을 살펴 보도록 하겠습니다.