자바스크립트 - 비동기 (Asynchronous) 처리하기 (동기 / 비동기)

동기 (Synchronous)

어떤 요청을 한 후, 요청에 대한 응답을 받아야지만 다음 동작을 진행합니다.
어떠한 일을 처리하는 동안의 다른 프로그램은 정지 상태. 실제 CPU의 성능 저하가 아닌, 효율성이 낮아집니다.

비동기 (Asynchronous)

어떤 요청을 보낸 후 응답 여부에 상관 없이, 다음 동작을 실행하는 방식입니다.
결과가 주어지는 시간동안 다른 동작을 할 수 있게 되는 것이죠. 자원을 좀 더 효율적으로 사용 할 수 있게 됩니다.
비동기 함수의 논블로킹(Non-Blocking)의 이점 때문에, JavaScript처럼 싱글스레드 환경에서 실행되는 언어에서 광범위 하게 사용 됩니다.

---

setTimeout()

JavaScript의 비동기 내장 함수인 setTimeout() 입니다.

function sayHello(n, cb){
  setTimeout(function(){
    console.log(n + '초 대기 후 출력');
    cb("반가워요");
  }, 1000 * n);
  console.log("안녕하세요 ~");
}
sayHello(2, function(greeting){
  console.log(greeting);
});

안녕하세요 ~
2초 대기 후 출력
반가워요

setTimeout()의 예시입니다.

첫번째 인자에는 function()을 정의하고, 두번째 인자에는 function을 실행하기 전에 기다리는 밀리초 단위 시간입니다.
간단한 로직들은 setTimeout()을 통해 비동기 처리를 할 수 있습니다.

---

Promise

다음은 ES6 부터 등장한 Promise 입니다. fetch(), then(), catch()의 키워드를 사용해서 비동기 로직을 처리합니다.

function getData() {
  return fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))
}

 

이런식으로 비동기 로직들에 대한 처리가 순차적으로 가능해 집니다.
하지만 프로젝트의 규모가 커지고, 다루어야 할 데이터들이 더 방대해지면 생기는 Promise의 문제점들이 있습니다.

디버깅

다수가 호출 된 then() 부분에서 에러가 발생했을 때, 어느 then()에서 에러가 발생하였는지에 대한 확인이 난해합니다.

예외 처리

다수의 동기 코드와 비동기 코드가 섞여 있을 경우, 예외처리가 난해하여지고, 누락의 가능성이 생길 수 있습니다.
Promise는  try/catch를 통한 예외처리가 불가하고, catch()를 통한 예외처리가 이루어져야 합니다.

들여쓰기

실제 프로젝트에서, 코드의 구조가 복잡한 비동기 로직들을 다루게 될텐데, then()메서드 내에서 인자로 넘기는 콜백 함수 내에서의 로직들에 또 정의되는 또 다른 조건문이나, 반복문과 같은 로직들에 의해 늘어지게됩니다. Promise의 호출이 반복되고, 늘어날수록 코드의 가독성이 떨어질 수 있습니다.

 

---

async / await

ES7 부터 등장한 async / await 입니다. 비동기 코드를 마치 동기 코드처럼 다룰 수 있도록 해줍니다.
function 앞의 async 키워드가 있어야, await를 사용 할 수 있습니다. Promise를 리턴하는 비동기 함수 앞에 await 키워드를 작성하여 주고, 작성해 줌으로써 결과값을 얻을때까지 대기 상태가 됩니다.

async function getData() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const todo = await response.json();
    return todo;
  } catch (e) {
    console.error(e);
  }
}

이런식으로 try/catch를 사용한 동기/비동기 구분없는 예외 처리 또한 가능하며,  좀 더 명확한 비동기 처리가 가능해집니다.

주의

async가 붙은 함수를 명시적으로 호출하게 되면 , Promise 객체가 리턴됩니다. 따라서 await 키워드를 사용함으로써 Promise가 제공한 값에 접근 하여야 합니다.

 

인용 및 참조
https://www.daleseo.com/js-async-async-await/