비동기 처리방식 & 콜백함수+프로미스 활용 : javascript

horiz.d·2021년 12월 15일

JS 꿀단지

목록 보기

18/35

비동기처리

비동기 처리방식 ( Asynchronous processing ) 은 프로그램이 특정 로직의 실행이 끝날때까지 기다렸다가 그 후의 로직을 실행하는 것이 아니라, 특정 로직이 실행되는 동안 그 이후의 나머지 코드를 실행하는 처리방식이다.

화면에서 서버로 데이터를 요청했을 때 서버가 요청에 대한 응답을 빠르게 주지 못할 수 있고, 이로 인해 발생하는 지연의 잠재적 문제 때문에 비동기 처리방식이 사용된다.

문제에 대해 조금 더 구체적으로 말해보자면, 아래와 같이 API를 사용한 데이터 요청을 서버가 아직 응답해주지 않았을 때, 이후의 로직에서 데이터를 화면에 출력하려고 하면 빈 화면을 출력하거나 에러메세지가 나오는 등의 문제가 발생하게 된다.

$.get('url 주소/products/1', function(response) {
  // ...
});

비동기 처리 예제

// #1
console.log('Hello');
// #2
setTimeout(function() {
	console.log('Bye');
}, 3000);
// #3
console.log('Hello Again');

위의 코드에서 스크립트의 진행순서로 본다면, 직관적으로는, 결과 또한 #1 #2 #3 순으로 아래와 같이 나와줘야 할 것으로 기대된다.

(#1) 'Hello' 출력
(#2) 3초 후 'Bye' 출력
(#3) 'Hello Again 출력

하지만 결과는 아래와 같다.

(#1) 'Hello' 출력
(#3) 'Hello Again 출력
(#2) 3초 후 'Bye' 출력

바로 이것이 비동기처리 방식에 기인한 예측하기 힘든 결과이며 이것은 자주 문제로 작용한다.

해결방법

콜백함수 활용
프로미스 활용

이번 글에선 콜백함수를 이용한 해결예제만 알아보겠다.

(1) 콜백함수로 비동기처리 문제점 해결하기

앞에서 발생한 비동기 처리방식의 대표적인 해결사가 바로 콜백함수이다.

콜백함수 정리 글 :
https://velog.io/@he1256/JS%EC%9D%98-%EC%BD%9C%EB%B0%B1%ED%95%A8%EC%88%98Call-back-Simple-Note-javascript

콜백함수를 이용한 비동기문제 해결예제
제이쿼리의 ajax 통신 API 활용 - 콜백함수로 비동기 처리 코드 예제이다.
구체적으로는 ajax 통신 API를 이용하여 지정된 URL에서 1번 상품 데이터를 받아오는 코드이다.

function getData(callbackFunc) {
  $.get('url 주소/products/1', function(response) {
    callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
  });
}

getData(function(tableData) {
  console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});

(2) 프로미스를 이용한 비동기문제 해결

위의 ajax API -콜백 예제를 프로미스로 처리한 예제코드이다.

new promise(), resolve(), then() 등의 프로미스API를 사용한 구조이다.

function getData(callback) {
  // new Promise() 추가
  return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response) {
      // 데이터를 받으면 resolve() 호출
      resolve(response);
    });
  });
}

// getData()의 실행이 끝나면 호출되는 then()
getData().then(function(tableData) {
  // resolve()의 결과 값이 여기로 전달됨
  console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨
});