[Node.JS / Express 강의] #4 비동기 처리 란? / Promise 란? / async & await란?

1. 비동기 처리란?

먼저 동기 처리란 하나의 요청이 처리되는 동안 다른 요청이 처리되지 못하며 요청이 완료되어야 다음 처리가 가능한 방식이다. 이와 반대로 비동기 처리란 하나의 요청이 처리되는 동안 다른 요청도 처리되는 방식으로 요청이 완료되지 않아도 다음 처리가 진행되는 것을 의미한다

 

비동기 예시

setTimeout(_ => {
    console.log('1')  // 2번
  }, 1000)
  console.log('2') // 1번

만약 다음과 같은 코드가 만약 동기 처리였다면 콘솔에는 1 > 2 순으로 결과가 나타났을 것이다. 하지만 비동기 처리방법에서는 2 > 1 순으로 결과가 나타나게 된다 이는 setTimeout함수가 끝나기 전에 console.log('2')가 먼저 실행되기 때문이다. 이를 해결하기 위해 callback을 사용하게 된다면 다음과 같은 방법으로 가독성이 떨어지게 될 것이다.

setTimeout(_ => {
  console.log(`1`)
  setTimeout(_ => {
    console.log(`2`)
    setTimeout(_ => {
      console.log(`3`)
    }, 1000)
  }, 1000)
}, 1000)

---

2. Promise란?

1번과 같이 비동기 처리에서 callback함수를 이용하는 것 대신 promise를 이용하여 비동기를 처리할 수 있다.

function example(callback) {
  return new Promise(function (resolve, reject) {
    setTimeout(_ => {
    	console.log('1번')
    resolve() // 인자를 넘겨줄 수도 있음 그러면 then함수에 인자를 넘겨줌
  }, 500)
  });
}

// example()의 실행이 끝나면 호출되는 then()
example().then(function () {
  // resolve()의 결과 값이 여기로 전달됨
  console.log('2번'); //
});

다음과 같이 example함수를 실행했을 경우에는 Promise객체가 생성되고 1초 뒤 콘솔 1번이 실행된 후 then의 있는 콘솔 2번이 출력되게 된다. 만약 여러 개의 함수를 처리할 경우 다음과 같다.

 

new Promise(function(resolve, reject){
  setTimeout(function() {
    resolve(100);
  }, 1000);
})
.then(function(result) {
  console.log(result); // 100
  return result + 100;
})
.then(function(result) {
  console.log(result); // 200
  return result + 100;
})
.then(function(result) {
  console.log(result); // 300
});

then 함수를 통해 다음과 같이 사용하게 되면 처음에는 100을, 이후에는 200, 최종 결과로는 300을 출력하게 된다.

---

3. async & await란?

async & await 문법은 비동기로 실행되는 것들을 끝날 때까지 기다린다는 의미로 callback처럼 동기 방식으로 처리가 가능하게 해주는 문법이다. 중요한 점으로는 Promise로 처리가 되는 것만 await가능하다.

 

function example() {
  return new Promise(function(resolve, reject) {
    setTimeout(_ => {
    console.log('1번')
    resolve()
  }, 500)
  });
}

async function log() {
  await example();
  console.log('2번');
}

다음과 같이 log라는 함수가 실행되게 되면 example() 함수가 실행된다 example함수는 promise함수로서 1번이라는 값을 출력하고 await구문에 의해 이 promise과정이 끝난 후 console.log('2번')이 실행된다.

 

function getData(query) {
  return new Promise(function (resolve, reject) {
    $.get('/query', function (response) {
      resolve(response);
    });
  });
}

async function main() {
  var res1 = await getData(sql1);
  var res2 = await getData(sql2);
  console.log(res1);
  console.log(res2);
}

다음과 같이 서버와 통신을 하는 예제도 생각해볼 수 있다. 메인 함수에서 getData(sql1)이 실행되고 Promise함수에서 이를 처리할 때까지 getData(sql2)는 실행되지 않는다 이후 처리가 완료되면 getData(sql2)가 실행되고 console에 res1, res2가 찍히는 것을 확인할 수 있다.