[ JavaScript ES 6 ] Promise

1. 콜백함수는 여러번 쓸수록 depth가 깊어지고 가독성이 안좋아지는 문제가 있음 

    -> 더 쉽게 쓰기 위해 탄생한게 Promise 패턴

// Callback
func1(function(){
  func2(function(){
    func3(function(){
    })
  })
});

// Promise
func1().then(function(){

}).then(function(){

})

2. Promise는 코드 디자인 패턴이다.

var pro = new Promise();

pro.then(function(){
});

3. Promise는 이전 작업이 성공할 경우 then(), 실패할 경우 catch()를 사용해서 모든 경우에 대비할 수 있도록 해줌

4. Promise는 성공/실패 판정 기계

var pro = new Promise(function(resolve, reject){
  resolve(10); // 성공할 시
  reject(); // 실패할 시
});

pro.then(function(result){
	console.log('success ' + result);
}).catch(function(){
	console.log('fail');
});

 

5. Promise의 3가지 상태
    pending -> 성공/실패 여부 판별 전
    resolved -> 성공
    rejected -> 실패

6. Promise는 비동기랑 관련 없으니 오해하지 말길

7. AJAX를 쓰는 fetch() API는 리턴 값으로 Promise를 남겨주기 때문에 then(), catch()로 AJAX 후처리 가능
    근데 fetch()는 호환성이 그렇게 좋진 않음

8. 이미지 로딩 Promise 예시

var imgLoadingPro = new Promise(function(resolve, reject){
  var img  = document.querySelector('#test');
  img.addEventListener('load', function(){
	  resolve();
});

img.addEventListener('error', function(){
  reject();
  });
});

imgLoadingPro.then(function(){
	console.log('loading success');
}).catch(function(){
	console.log('loading fail');
});

 

9. AJAX 요청 시 Promise 예시

var pro = new Promise((resolve, reject) => {
	$.get('https://google.com')
	.done(function(result){
		resolve(result)
	});
});

pro.then(function(result){
		console.log(result);
		return new Promise(); // 연속으로 다음 Promise를 진행하고 싶으면 그 Promise를 리턴
	}).then(function(){
	});
});