Promise

Promise
자바스크립트 비동기 처리에 사용되는 객체
주로 서버에서 받아온 데이터를 화면에 표시할 때 사용

promise 처리 흐름 출처=> MDN

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

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


/*************Promise 적용***************/
function getData(callback) {
	//new Promise() 추가
    return new Promise(function(resolve, reject){
    	$.get('url 주소/product/1', function(response) {
        	//데이터를 받으면 resolve() 호출
            resolve(response);
        });
    });
}

//getData() 의 실행이 끝나면 호출되는 then()
getData().then(function(tableData) {
	//resolve()의 결과 값이 여기로 전달됨
    console.log(tableData);		//$.get() 의 response 값이 tableData에 전달됨
});

Promise의 상태(states) - 프로미스의 처리 과정

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

Pending(대기)

new Promise();		//매서드 호출하면 대기(Pending) 상태가 됨

// new Promise() 메서드를 호출할 때 콜백 함수 선언 가능, 콜백 함수 인자=> resolve, reject
new Promise(function(resolve, reject) {
	//...
});

Fulfilled(이행)

*promise의 "이행" 상태를 다르게 표현하면 -> "완료"

//resolve를 실행하면 이행(Fulfilled) 상태가 됨
new Promise(function(resolve, reject) {
	resolve();
});

//이행 상태 -> then() 이용하여 처리 결과 값 받을 수 있음
function getData() {
	return new Promise(function(resolve, reject) {
    	let data = 300;
        resolve(data);
    }
}

//resolve() 결과 값인 data를 resolvedData로 받음
getData().then(function(resolvedData) {
	console.log(resovedData);	//300
});

Rejected(실패)

//콜백 함수 인자 reject 호출 하면 -> 실패(Rejected) 상태
new Promise(function(resolve, reject) {
	reject();
});

//catch() : 실패 상태의 실패한 이유(실패 처리의 결과 값) 받을 수 있음
function getData() {
	return new Promise(function(resolve, reject) {
    	reject(new Error("Failedddddddd"));
    });
}
//reject()의 결과값 Error를 Errrrror에 받음
getData().then().catch(function(Errrrror) {
	console.log(Errrrror);		//Error: Failedddddddd
});

Promise 연결 예시

getData(userInfo)
	.then(parseValue)
    .then(auth)
    .then(display)
//userInfo => 사용자 정보가 담긴 객체
//parseValue, auth, display => 각각 promise를 변환해주는 함수

let userInfo = {
	id: 'rkhong',
    pw: '*****'
};

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

Promise 에러 처리 방법

1. then()의 두번째 인자로 에러 처리

getData().then(function() {
	//...
}, function(error) {
	console.log(error);
});

2. catch()

getData().then().catch(function(error) {
	console.log(error);
});

=> then(), catch()는 promise의 reject() 메서드가 호출되어 실패 상태된 경우 실행됨.

Promise 에러 처리는 가급적 catch() 사용

• then()의 첫번째 콜백 함수 내부에서 오류가 나는 경우 오류를 제대로 잡아 내지 못함.
• 더 많은 예외 처리 사항을 위해 Promise의 끝에 가급적 catch()를 붙이는 것이 좋음.

.
.
.
.

Reference

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/