자바스크립트의 Promise 의 역할

 

 

Promise

자바스크립트 비동기 처리에 사용되는 객체이며,

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

비동기 처리란?
특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 것

 

 

---

 

 

프로미스 예제

 

콜백함수를 사용하는 Ajax 코드

function getData(callbackFunc) {
	$.get('url 주소', (response) => {
		callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
	});
}

getData((tableData) => {
	console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});

 

위의 콜백 함수로 처리하던 구조에서 프로미스를 사용할 경우 아래와 같은 코드로 실행할 수 있다.

 

콜백 함수를 활용했을 경우 결과값을 함수의 인수로 주어 호출하였고,

프로미스의 경우엔 return 으로 프로미스를 선언하여 API 호출이 끝나면 자동으로 response 값을 돌려준다.

 

 

프로미스를 활용한 예제

function getData() {
	return new Promise((resolve, reject) => {
		$.get('url 주소/products/1', function(response) {
			if (response) {
				resolve(response);
			}
			reject(new Error("Request is failed"));
		});
	});
}

// 위 $.get() 호출 결과에 따라 'response' 또는 'Error' 출력
getData()
	.then((data) => {
		console.log(data); // response 값 출력
	}).catch((err) => {
		console.error(err); // Error 출력
	});

 

 

 

---

 

 

 

 

 

프로미스의 3가지 상태(states)

 

프로미스를 생성하고 종료될 때까지 3가지의 상태를 가지며, 프로미스의 처리 과정에 따라 작업을 수행할 수 있다.

 

상태	설명
Pending (대기)	비동기 처리 로직이 아직 완료되지 않은 상태
Fulfilled (이행)	비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
Rejected (실패)	비동기 처리가 실패하거나 오류가 발생한 상태

 

 

---

 

Pending(대기) 

 

먼저 아래와 같이 new Promise() 메서드를 호출하면 대기(Pending) 상태가 된다.

new Promise();

 

new Promise() 메서드를 호출할 때 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject이다.

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

 

 

---

 

 

Fulfilled(이행) = 완료

 

콜백 함수의 인자 resolve를 아래와 같이 실행하면 이행(Fulfilled) 상태가 된다.

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

 

예제

function getData() {
	return new Promise((resolve, reject) => {
		var data = 100;
		resolve(data);
	});
}

// resolve()의 결과 값 data를 resolvedData로 받음
getData()
    .then((resolvedData) => {
        console.log(resolvedData); // 100
    }
);

 

 

---

 

 

Rejected(실패)

 

콜백 함수의 인자 rejected를 아래와 같이 실행하면 실패(Rejected) 상태가 된다.

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

 

예제

※ reject의 에러값을 catch로 받을 수 있음

function getData() {
	return new Promise((resolve, reject) => {
		reject(new Error("Request is failed"));
	});
}

// reject()의 결과 값 Error를 err에 받음
getData()
    .then()
    .catch((err) => {
        console.log(err); // Error: Request is failed
    }
);

 

 

 

 

---

 

 

 

 

 

 

프로미스를 이용해서 여러 함수를 연결시킬 수 있다.

 

아래처럼 then을 이용해 프로미스가 완료되었을 때 그 다음 함수를 호출하는 코드를 짤 수 있다.

 

getData(userInfo)
	.then(parseValue)
	.then(auth)
	.then(diaplay);
    
var userInfo = {
	id: 'test@abc.com',
	pw: '****'
};

function parseValue() {
	return new Promise({
		// ...
	});
}
function auth() {
	return new Promise({
		// ...
	});
}
function display() {
	return new Promise({
		// ...
	});
}

 

 

 

 

 

 

 

 

 

---

참고사이트

자바스크립트 Promise 쉽게 이해하기