비동기, Promise

JS로 개발이 어느 정도 되면 비동기 코드들이 사용된다.

비동기란 get('naver.com') 같은 것을 하는 코드가 있을 때 요청을 날리고 다음 코드 실행으로 넘어가는 방식이다.

 

console.log("hello")

get('naver.com')

console.log('bye')

 

라는 세 줄의 코드가 있을 때 get에 대한 응답이 날라오기 까지 5분이 걸린다고 해보자. 

만약 get의 응답이 날라오기 전까지 다음 라인을 실행하지 못한다면 'bye'가 5분 뒤에 콘솔에 찍힐 것이다.

 

get의 응답을 받는 것이 이후 코드에 선행되어야 하지 않는다면 get의 응답이 오기 전까지 기다리느 것이 아니라 이후 코드를 실행하면 될 것이다. 요청을 날리고 -> 'bye'를 찍고 -> 요청이 5분 뒤에 응답이 올 것이다.

 

실제로 자바스크립트는 위와 같은 처리 방식을 적극적으로 사용하고 있다.

 

그렇다면 get에 대한 응답을 기다리지 않고 있다가 응답이 성공했을 때 이에 대한 결과 처리를 해주어야 할 때 어떻게 할까? 즉, get에 대한 응답은 5분 뒤에 오는데 이미 'bye' 를 실행하고 더 이상 실행할 것이 없는 코드이기 때문이다.

예를 들어 get 응답을 기다리지 않고 다음 코드를 실행시키다가 get이 성공하면 화면에 성공했다고 표시해주는 상황이라고 가정해보자. get이라는 함수가 naver 페이지의 html을 응답을 받았다면 Promise('성공') 을 리턴해준다고 해보자.

 

그럼 

 

console.log("hello")

get('naver.com')

.then( function(message){

  console.log("then" + message);

}

console.log('bye')

 

get().then() 와 같은 형태로 작성하게 된다. get 요청을 보내고 get 다음 코드(console.log('bye'))를 쭉 실행하다가 get의 응답이 왔고 성공이라면 then 인자의 함수를 실행하라는 뜻이다.

'hello'->get요청-> 'bye'-> 성공했음을 화면에 표시

 

Promise('성공')은 위 상황을 처리하는데 필요한 객체이다. 내부적으로 get이라는 함수를 실행하면 get의 리턴으로 Promise 객체가 날라오게 된다. 이 때, 두 가지 종류가 있는데 하나는 resolve이고 하나는 reject 이다. resolve는 성공이고 reject는 실패이다.

 

get(url) {

  return new Promise(){

    // url 요청 후 결과 받음

    if(success) resolve('성공')

  }

}

 

get이라는 함수는 url 요청을 하고 성공인 경우에 resolve('성공') 을 수행한다. 이는 곧 get이 성공했을 때 Promise('성공')을 리턴 받는 것과 동일한 의미를 가진다고 보면 쉽다. 처음에는 이해가 어려울 것이지만 설명해둔 상황을 생각하고 그에 대한 처리 방식을 간단히 되짚어 보면 이해가 될 것이다. 검색을 통해서 다른 설명과 예제들을 실행해 보는 것을 추천한다.