자바스크립트의 비동기 처리 - 프로미스(Promise)

캡틴판교님의 블로그를 보고 정리한 내용입니다

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

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

---

먼저 자바스크립트의 비동기 처리란 "특정 코드의 실행이 완료될때까지 기다리지 않고 다음 작업을 실행하는 것" 입니다.

프로미스(Promise)는 자바스크립트의 비동기 처리를 위해 사용되는 객체입니다. (ES6)

 

Promise란 ?

"Promise란 코드에서 바로 값을 return 하지 않는 대신 promise를 return 하여 최종적으로 나중에 값을 제공하는 것을 뜻합니다."

대표적으로 HTTP 호출을 했을 떄 사용됩니다.

 

Promise가 사용되는 이유

서버에서 받아온 데이터를 화면에 표시하려고 합니다.

일반적으로 서버에서 HTTP 요청을 보내고 받아오기 위해 API를 사용합니다.

function getData(callbackFunc){
	$.get('url주소/product/1',function(response){
    	callbackFunc(response);
    });
  } //서버에서 받은 데이터 response를 callbackFunc함수에 넘겨준다
  
  
getData(function(tableData){
	console.log(tableData);
  } //$.get()의 response 값이 tableData에 전달

 

다음과 같이 제이쿼리의 AJAX 통신으로 어떤 URL에서 1번 상품 데이터를 가져올 수 있습니다.

 

먼저 Promise 생성자 함수가, 인수로 전달받은 콜백 내부에서 비동기 처리를 수행합니다. 

만약 비동기 처리가 성공한다면, 콜백 함수의 인수로 전달받은 resolve함수를 호출하고, 실패하면 reject함수를 호출합니다.

 

Promise의 세가지 상태(states)

프로미스는 3가지의 상태(states)를 가집니다. 요기서 이야기하는 상태는, new Promise()로 프로미스를 생성하고, 종료될때까지의 상태입니다.

 

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

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

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

 

각각에 대해 알아보겠습니다.

Pending(대기)

생성자 함수인 new Promise()를 호출하면 대기(Pending)상태가 됩니다.

앞의 코드에서처럼 new Promise()메서드 호출시 콜백함수 2개(resolve,reject)를 인수로 넣을 수 있었습니다.

 

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

 

만약 프로미스의 인수 중 resolve를 실행한다면, 이행(Fulfilled)상태가 됩니다.

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

이행 상태가 완료된다면, then()으로 결과 값을 받을 수 있게 됩니다.

function getData(){
	return new Promise(function(resolve,reject){
    	let data = 100;
        resolve(data);
     });
  }
  
 // resolve가 호출되면 이행 상태로 바뀌고 then()으로 결과 값 획득
 getData().then(function resolvedData){
 	console.log(resolvedData);
 });

 

Rejected(실패)

new Promise()의 인수 중 reject를 호출하면 실패(rejected)상태가 됩니다.

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

 

실패 상태가 되면 catch()로 실패한 이유를 받을 수 있습니다.

function getData(){
	return new Promise(function(resolve,reject){
    	reject(new Error('실패'));
     });
  }
  
// reject의 결과 값 Error를 받음
 getData().then().catch(function(err){
 	console.log(err);
 });

 

결국 프로미스의 상태는 resolve(), reject() 함수를 호출하는 것으로 결정됩니다.

 

서버에서 응답을 받아오면 resolve()메서드를 응답이 없으면 reject()메서드를 호출합니다.

호출된 결과에 따라 then(), 혹은 catch()로 분기해 결과 값이나 애러를 처리합니다.

function getData(callback){
	return new Promise(function(resolve,reject){
    	$.get('URL주소/products/1',function(response){
        	// 데이터를 받으면 resolve호출
            if(response){
            	resolve(response);
            }
            	reject(new Error('Request failed'));
            
         });
       });
      } 
       
   
 
 getData().then(function(tableData){
 	console.log(tableData);
  }).catch(function(err){
  	console.error(err);
  });