21.04.19 Promise

📌Promise

프로미스 객체는 비동기 작업 처리에 사용되는 객체이다. 

주로 서버에서 받아온 데이터를 화면에 표시할 때 사용! 일반적으로 웹 어플리케이션을 구현할 때, 서버에서 데이터를 요청하고 받아오기 위해 $.get('url 주소/products/1', function(response){ }); 같은 API를 사용한다. 

위 API 가 실행되면 서버에 데이터를 요청하게 되는데 여기서 데이터를 받아오기도 전에 데이터를 받아온 것마냥 화면에 데이터를 표시하려고 하면 오류가 발생한다. 이 문제점을 해결하기 위한 것이 프로미스이다. 

 

1. 비동기 처리를 위해 프로미스 대신 콜백 함수를 사용한 것이다. 

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

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

2. 위 코드에 프로미스를 적용한 것이다. 

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

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

callback function => new Promise(), resolve(), then()

 

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

new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖는다.

Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태

Fulfilled(완료) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태

Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

 

Pending(대기) 👉 new Promise() 메서드를 호출하면 이 상태가 된다. 

호출할 때 콜백 함수를 선언할 수 있고 콜백함수의 인자는 resolve, reject

new Promise(function(resolve, reject){

});

Fulfilled(완료) 👉 콜백함수의 인자 resolve를 실행하면 이 상태가 된다. 그리고 then()을 이용하여 처리 결과 값을 받을 수 있다. 

new Promise(function(resolve, reject){
	resolve();
});

Rejected(실패) 👉 reject를 호출하면 이 상태가 된다. 그리고 실패한 이유를 catch()로 받을 수 있다. 

프로미스 에러 처리는 then()보다는 가급적 catch()를 사용한다. 똑같은 에러를 then()으로 처리하면

Uncaught (in promise) 오류를 발생시키기 때문이다.

아마 리액트에서 나는 오류를 말하는 듯

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

//reject()의 결과 값 Error를 err에 받는다. 
getData().then.catch(function(err){
	console.log(err);
});

 

📌login에 적용할 수 있는 promise 예제

//페이지에 입력된 사용자 정보를 받아와서 파싱, 인증 작업을 거치는 코드
//아래와 같은 여러 개의 프로미스를 .then()으로 연결한 것!!
getData(userInfo) //userInfo : 사용자 정보가 담긴 객체
//then(인자) : 프로미스를 반환해주는 함수
	.then(parseValue)
    .then(auth)
    .then(display);
    
//위 코드와 같다! 
const userInfo={
	id : 'test@abc.com', 
    pw : '****'
};

function parseValue(){
	return new Promise({
    
    })
}
function auth(){
	return new Promise({
    
    })
}
function display(){
	return new Promise({
    
    })
}