[자바스크립트] 비동기처리 Promise

[자바스크립트 단일스레드 비동기처리]

- 제목 그대로다

- 자세히 알아보기 : http://jinbroing.tistory.com/98

=> 비동기함수와 콜백함수 처리 구별

try{
     setTimeout(function(){
          throw 'Error!';
     }, 1000);
} catch(e){
     console.log(e);
}

- 위의 코드는 에러를 캐치할까 못할까? : 하지 못함, setTimeout과 파라미터로 전달되는 콜백함수 처리를 구별할 줄 알아야함

- 위와 같은 문제를 해결하기위해 Promise가 제안됨

[Promise란]

- 비동기처리(콜백함수) 계산을 위해 사용됨 : ES6 정식 채택

- window(전역객체)의 멤버 : Promise

[Promise state]

- 앞서 살펴본 에러처리는 setTimeout(비동기함수)에 대한 에러처리지 콜백함수에 대한 에러처리가 아님

- 콜백함수 처리가 성공, 실패 하였는지 등 상태 정보를 가짐

1) pending : 비동기처리가 아직 수행되지않음

2) fulfilled : 비동기처리가 성공적으로 수행됨

3) rejected : 비동기처리를 실패함

4) settled : 비동기처리가 수행된 상태(성공 or 실패)

[Promise 객체 생성 구문]

1) 생성 구문

new Promise(function(resolve, reject){
     //비동기 처리 수행
 
     if(/* 비동기 처리 수행 성공 */){
          resolve('resolved');
     } else {
          reject(Error('rejected!');
     }
});

- Promise 인자 : 비동기 처리를 할 콜백함수, 그 콜백함수는 인자로 두개의 함수를 받음

- Promise의 state에 따라(콜백함수 처리 성공/실패 여부에 따라) 실행되는 함수가 달라짐(콜백함수의 인자)

2) Promise 생성

var timer = function(bool){
     return new Promise(function(resolve, reject){
          setTimeout(function(){
               bool ? resolve("resolved") : reject("rejected");
          }, 1000)
     });
}
 
timer(true);

3) Promise state 활용

- Promise는 콜백함수 처리 후 상태값을 가짐

- Promise 객체 생성 후 체이닝된 메서드 호출, 상태값에 따라 후속 처리 함수를 호출

var timer = function(bool){
     return new Promise(function(resolved, rejected){
          setTimeout(function(){
               bool ? resolved("data 넣는 부분") : rejected("실패 메세지 넣는 부분");
          }, 1000);
     });
}
 
timer(true)
     .then(function(data){
          console.log("성공했네? : " + data);
     }, function(reason){
          console.error("실패한 이유 : " + reason);
     })
     .catch(function(e){
          console.log(e);
     });

- timer 후속 처리부분을 변수에 넣으면 같은 처리(최초 1회 처리, 이후 resolved 상태로 처리 X)

- timer() : Promise 객체리턴, 객체가 리턴되면  then 메서드 실행 (비동기처리 후 후속처리를 위해 Promise State 활용하는 것)

- catch 메서드 : 체이닝 처리 도중 에러가 날 경우 처리하는 메서드(여러개의 then)

4) Promise 객체 생성 시 return 아닌 변수에 할당하기

var _promise = new Promise(function(){
    
     /* 비동기처리 */
 
     if (+new Date()%2 === 0) {
          resolve("Stuff worked!");
     } else {
          reject(Error("It broke"));
     }
});
 
_promise.then(alert("hi");

- 이렇게 생성 시 .then()이 바로 실행

- 위의 예제는 resolve와 reject 상황 조건처리를 랜덤으로 해놔서 어떨때는 성공, 어떨때는 실패

5) 4번과 같이 사용하는 이유 : 모든 비동기처리가 끝났을 때를 처리하기위한 API를 깔끔하게 사용하기위해서

var promise1 = new Promise(function(resolve, reject){
     /* 비동기처리 */
 
     if(true){
          resolve();
     } else {
          reject();
     }
}
 
var promise2 = new Promise(function(resolve, reject){
     /* 비동기처리 */
 
     if(true){
          resolve();
     } else {
          reject();
     }
}
 
Promise.all([promise1, promise2]).then(function(val){
     console.log("모두 완료 됨", val);
});
 

- 여러개의 비동기처리가 완료와 관련한 콜백함수를 만드는 것

- Promise.all() 리턴 : Promise 객체 - new Promise

- 앞서 본 Promise 처리와 같음

[더 해볼 것]

- 비동기처리 : XMLHttpRequest 처리, 처리 직후 다른 처리

[참고자료]

- MDN, Promise : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

- Google, 자바스크립트 프라미스: 소개 : https://goo.gl/vFRVXZ

- 개인블로그, ECMAScript6 - Promise : http://poiemaweb.com/es6-promise