[JavaScript] 비동기 처리 2

JavaScript의 비동기 처리

• 특정 코드의 연산이 끝날 때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트 특성

비동기 처리 사례 1

// 흔한 사례로는 제이쿼리의 ajax , 
// 제이쿼리로 실제 웹 서비스를 개발 할 때 ajax통신을 주로 한다
// 보통 화면에 표시할 이미지나 데이터를 서버에 불러 와야할 때


function getData(){
   var tableData;
  $.get('https://domain.com/products/1', function(response) {
        tableData = response;
    });
    return tableData;

  console.log(getData()); // undefined
}

• $.get() ajax 통신을 하는 부분
• https://domain.com/products/1 에 HTTP GET 요청을 날려 1번 상품 정보를 요청하는 코드
• 서버에서 받아온 데이터는 reponse 인자에 담겨짐

왜 undefined 일까?

• $.get 로 데이터를 요청하고 받아올 때 까지 기다려주지 않고 다음코드인 return tableData 를 실행했기 때문
• **getData() 의 결과 값은 초기 값을 설정하지 않는 tableData의 값 undefined를 출력
• 즉 **특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것이 비동기 처리

비동기 처리 사례 2 (CallBack 게시글에서 다뤘던 내용)

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

예상하는 결과 값

// Hello
// 3초 있다가 Bye
// Hello Again 출력

실제 결과 값

// Hello
// Hello Again 출력
// 3초 있다가 Bye

비동기 처리 사례 1를 해결 해보기

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

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

• 특정 로직이 끝났을 때 원하는 동작이 실행이 가능

콜백 지옥

$.get('url', function(response) {
    parseValue(response, function(id) {
        auth(id, function(result) {
            display(result, function(text) {
                console.log(text);
            });
        });
    });
});

• 모든 과정을 비동기로 처리 해야한다고 하면 위와 같이 콜백안에 콜백을 무는 형식으로 코딩 하게 된다.
• 이 코드는 가독성도 떨어지고 로직을 변경하기도 어렵다

콜백 지옥 해결법

function parseValueDone(id) {
    auth(id, authDone);
}
function authDone(result) {
    display(result, displayDone);
}
function displayDone(text) {
    console.log(text);
}
$.get('url', function(response) {
    parseValue(response, parseValueDone);
});

• 위와 같은 코딩 패턴으로도 콜백 지옥을 해결할 수 있지만 Promise나 Async를 이용하면 더 편하게 구현이 가능