what is Promise? 2.비동기 처리의 처리
callback , promise 콜백, 프로미스 자바스크립트
비동기처리의 완료시점에 특정 코드를 실행하도록 하는 방법에 대해 알아보자.
첫번째는 callback 함수를 이용하는 방법이다.
Callback Function
콜백은 이리도 반가운 표정을 짓게 만드는 단어이다.
부재중 전화가 와있는 경우, 그걸 확인하고 걸어주는 call, callback이다.
callback function의 경우도 그 개념에 나온게 아닐까..생각된다.
비동기함수가 완료된 경우, 미리 입력된 callback function을 알아서 실행시키는 개념.
코드로 알아보자.
function printString(string, callback){
setTimeout(
() => {
console.log(string)
callback()
},
Math.floor(Math.random() * 1000)
)
}printString function은 string과 callback을 파라미터로 받는다,
그리고 function(){console.log(string) callback()}이라는 펑션을
랜덤second 이후 실행한다.
처음에 입력받은 callback을 비동기함수(랜덤초 대기) 이후 실행한다.
function printAll(){
printString("A", () => {
printString("B", () => {
printString("C", () => {})
})
})
}위에서 만든, 랜덤초 이후 입력받은 string을 출력하는 펑션을 계속 콜백으로 중첩되어 받아 실행하는 printAll()을 실행해보면,
순차적으로 완료되는 것을 확인할 수 있다.
위와 같이,
뭔가 시간이 걸리는 작업을 지원하는 method나 package는 이러한
콜백함수를 기본적인 파라미터 문법에 포함시키고 있는데,
예를들면
http 요청을 간단하게 지원하는 request라는 package를 보면 알 수 있다.
const request = require('request');request('http://www.google.com', function (error, response, body) {
console.error('error:', error);
// Print the error if one occurred
console.log('statusCode:', response && response.statusCode);
// Print the response status code if a response was received
console.log('body:', body);
// Print the HTML for the Google homepage.
});
request메소드를 간단하게 나눠보면
request('url', callback(error,response,body){})이렇게 볼 수 있다.
url로 http request보내고, 해당 작업이 완료되었을 때,
콜백을 실행하여 받아온 http respons, 혹은 error정보에 대해 접근 할 수 있다.
그런데 프로미스가 뭐냐고.. 어떻게 사용하냐고..
바로 위의 request예제를 Promise객체를 사용하는 방식으로 바꿔보겠다.
function getData(url){return new Promise(function(resolve,reject){
request('url',function(err,res,body){
if(err){
reject(err);
}else{
resolve(''+body);
}
}
}
}
뭔가 굉장히 길어졌다. 무엇?
getData라는 펑션은 데이터를 받아올 url을 파라미터로 받는다.
그리고 Promise생성자를 이용해 만든 Promise객체를 return한다.
그 생성자는 resolve와 reject를 파라미터로 갖는 펑션을 인자로 갖는다.
resolve와 reject가 뭔데? 누가 어디서 주입해준거야?
resolve와 reject는 Promise생성자에 들어가는 콜백function(executor)
에 내장된 문법이다.
이 executor는 Promise가 실행되는 즉시 실행이 되며, resolve와 reject는 이 프로미스 작업의 완료 시점에 해당 Promise작업의 상태(결과)를 return하기 위해 호출된다.
프로미스는 어떠한 상태를 갖는데?
프로미스는 무조건 3가지 상태중에 하나에 속한다.
- Pending — 최초 state시 상태
- fulfilled — 연산이 성공적으로 완료됨
- rejected — 연산이 실패함
fulfilled의 경우를 처리하기 위해서
resolve(받아온 결과)를 하면,
받아온 결과를 return하며, fullfiled상태로 바뀐다.
rejected의 경우는
reject(error객체)를 하면,
발생한 에러객체를 return하며, rejected상태가 된다.
.then 이후 catch로 해당 에러객체를 받을 수 있다.
프로미스 객체를 이용하는 사용법들을 알아 보자
1.then(function)
function getData(url){return new Promise(function(resolve,reject){
request('url',function(err,res,body){
if(err){
reject(err);
}else{
resolve(''+body);
}
}
}
}getData('http://www.naver.com')
.then(function(html){console.log('받아온 html',html)
})
.catch(function(err){
console.error(err)});
.then은 프로미스 객체를
대상으로 하는 메소드이다, 그리고 파라미터로 promise결과를 받는
콜백 함수를 갖는다.
2. Promise Chaining
getData('http://www.naver.com')
.then(function(html){return html+1;
}).then(function(html){return html+1;
}).then(function(html){return html+1;
}).then(function(html){return html+1;
})
이런식으로, 앞의 then에서 처리한 결과를 return하고,
해당 return값에 대해 임의로 정한 파라미터명으로 받아서
후속적인 처리가 가능하다.
다음 글에서는,
자바스크립트가 비교적 최신버젼에서 도입하고, 권장하고 있는
Async/Await를 통해 비동기처리 처리를 어떻게 하는지 알아보자.
참고
