Promise Pattern

  • 비동기 코드 작성 패턴
  • 이벤트/콜백패턴의 문제를 한번에 해소
  • 비동기코드를 마치 동기 코드처럼 표현함

Promise 생성자

  • 프로미스 생성자는 프로미스 인스턴스를 만든다.
  • 이때! 비동기 작업에 해당하는 실행자(Executor)라는 콜백을 넘김.
  • Executor는 두가지 파라미터를 가진다.
    • resolve 콜백 : 작업 성공시 해당 콜백이 실행
      • 성공하면! => 콜백에 결과값을 전달
    • reject 콜백 : 작업 실패시 해당 콜백이 실행
      • 실패하면! => 콜백에 실패 사유를 전달

Promise로 AJAX요청

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var promise = new Promise(function(resolve, reject){
  
  var request = new XMLHttpRequest();
  var url	  = "data.json";
  
  request.open("GET", url);
  
  request.addEventListener("load", function(){
    if( request.status === 200 )
    {
      resolve(request.responseText);
    }
    else
    {
      reject("Server Error:", request.status);
    }
  },false);
  
  request.addEventListener("error", function(){
    reject("Ajax request fail");
  },false);
  
  request.send();
  
});