[ES 6] Promise 패턴을 사용한 http request 요청

 Promise 패턴은 이벤트/콜백 패턴의 골칫거리(콜백헬)를 해소하고 비동기 코드를 마치 동기 코드처럼 표현하는 것을 말한다.

 

1. Promise 생성자

 

 Promise 생성자는 Promise 인스턴스를 생성한다. 이 때 비동기 작업에 해당하는 실행자 콜백을 넘기는데, 실행자는 귀결(resolve)콜백과, 버림(reject)콜백 두 파라미터를 가진다. 작업이 성공하면 resolve, 실패하면 reject콜백이 실행된다. 아래 예제를 보자.

 

function httpRequest(url, method) {
return new Promise((resolve, reject) => {
let request = new XMLHttpRequest();
request.open(method, url);
request.addEventListener("load", () => {
if(request.status === 200)
resolve(request.responseText);
else
reject(`Error : ${request.status}`);
}, false);

request.addEventListener("error", () => {
reject("request failed");
}, false);

request.send();
});
}

httpRequest('요청 url', 'GET or POST').then((result) => {
console.log(result);
}).catch((e) => {
console.log(e.message);
});

 

 해당 예제는 httpRequest 호출을 promise 패턴으로 한 것이다. resolve(request.responseText) 콜백이 이루어지면 then((result) 부분으로 진행이 되고 reject() 콜백이 이루어지면 catch()로 가게된다.

 

Promise는 then()으로 체이닝이 가능하기 때문에 콜백헬에 빠졌던 소스들을 좀 더 보기 쉽게 만들 수 있다. 아래는 단순 예제이다.

 

httpRequest('요청 url', 'GET or POST').then((value) => {
return value;
})
.then((value)=> httpRequest(`요청 url2?param=${value}`, 'GET'))
.then((result) => {
console.log(result);
})
.catch((e) => {
console.log(e.message);
});

 

Promise는 네 가지 상태값을 가진다.

 

 - Fulfuilled : resolve 콜백이 Promise 아닌 객체를 인자로, 또는 인자 없이 실행될 때의 상태를 의미한다.

 

 - Rejected : 실행자 스코프에서 예외가 발생하거나 reject 콜백이 실행될 경우 상태이다.

 

 - Pending : resolve/reject 콜백 실행 전 Promise의 상태이다.

 

 - Settled : pending 상태가 아닌, fulfilled/reject 중 한 쪽에 도달한 확정 상태이다.

 

 

2. Promise 메소드

 

 A. Promise.resolve(value) 메소드

 

 이 메소드의 기본 기능은 임의의 값을 Promise 객체로 바꾸는 것이다.

 

let value = Promise.resolve(5);

value.then((val) => {
console.log(val);
});

 

B. Promise.reject(value) 메소드

 

 Promise 객체로의 변환이 아닌 디버깅 용도로 쓰인다.

 

C. Promise.all(iterable) 메소드

 

 all은 주어진 iterable 객체의 Promise가 모두 이루어질 때 새 Fulfilled Promise를 반환하는 메소드이다.

 

** for문으로 promise 요청을 돌리는 분들이 간혹 있는데 all을 쓰면된다.

 

D. Promise.race(iterable) 메소드

 

 주어진 Iterable 객체의 Promise 중 어느 하나라도 이루어질 때 해당 Fulfilled값을 지닌 새 Fulfilled Promise를 반환하는 메소드이다. 프로미스들끼리 경쟁을 붙여 먼저 완료된 Promise 요청에 대한 결과가 반환된다.