[js] promise

자바스크립트에서 비동기식 프로그래밍을 하다보면 피치못하게 콜백헬에 부딪히는 경우가 발생한다.

아래는 async1이 수행 후, async2, async3, async4가 차례로 수행되도록 (절차적으로 작동) 하는 비동기식 코드다.

let async1 = (callback) => {

callback();

}

let async2 = (callback) => {

callback();

}

let async3 = (callback) => {

callback();

}

let async4 = (callback) => {

callback();

}

async1(() => {

async2(() => {

async3(() => {

async4(() => {

})

})

})

})

함수의 내용을 생략했기 때문에 뭐 이런거 가지고 문제가 되는가 하는 생각을 가질 수 있겠으나

함수의 내용이 길어지고 복잡해 질수록 코드는 난해해저 갈 것이다.

이러한 문제를 해결하기위해 promise 라는 것을 자바스크립트에서 제공한다. 아래는 http get 요청을 보내는 함수를 promise 를 사용하여 구현한 코드다.

node.js 에서 request 모듈을 사용하여 promise 객체를 만들었다. 설명으로 들어가자면

일단 httpRequest 객체에 get이라는 함수를 만드는데, 이때 인자값으로 options을 준다.

인자값인 options는 new Promise의 익명함수안에서 사용되는데, 여기서 new Promise를 선언할 때, resolve와 reject를 인자값으로 넣어준다.

resolve 는 정상적으로 비동기식 코드가 실행되었을 경우,

reject 는 비정상적(에러)으로 비동기식 코드가 실행되었을 경우를 나타낸다.

자 정상적으로 request모듈의 request가 실행되면 resolve(res)를 실행해, res를 사용할 수 있도록 반환해주고

에러가 발생하였을때 reject(Error(err))를 실행해 에러를 보여줄 수 있도록 한다.

httpRequest.get = (options) => {

return new Promise((resolve, reject) => {

request(options, (err, res) => {

if (err) reject(Error(err));

else resolve(res);

});

});

};

이렇게 만든 promise 객체 httprequest.get을 호출할 때를 보면 .then 을 사용하여 response 혹은 err를 받아 올 수 있다. 여기서 then의 익명함수의 인자값 res는 resolve의 res와 같다.

httpRequest.get(_HOST + _URL)

.then((res) => {

console.log(res);

}}, (err) => {

console.error(err);

});

promise를 사용하면 비동기 작업을 차례로(절차적으로) 실행 할 수 있다.

위의 예제에서는 정상적으로 get 통신을 했다면 res라는 object를 반환 받을 것이다. object형의 반환값을 스트링으로 변환하는 작업을 절차적으로 하고싶다면

첫번째 then에서 return 으로 값을 전달해주고 두번째 .then에서 해당값을 인자값으로 받아 처리를 해주면 된다.

httpRequest.get(_HOST + _URL)

.then((res) => {

console.log(res);            // print: object

return JSON.stringify(res);

})

.then((res)=>{

console.log(res);            // print: res string data

})

여기서 JSON.stringify는 단일 인수를 취하고 변환된 값을 반환하므로 아래와 같이 심플하게 변경이 가능하다.

httpRequest.get(_HOST + _URL)

.then(JSON.stringify)

.then((res)=>{

console.log(res);            // print: res string data

})

여기까지가 내가 이해한 바의 promise 객체 사용법이다. 아직 더 공부를 해야하지만, 간략하게나마 이해할 수 있도록 작성해보았다.