비동기 프로그래밍(AJAX, Callback, Promise, Async/Await)

AJAX

Asynchronous JavaScript and XML의 약자로, 자바스크립트를 통해 비동기적으로 데이터를 교환하는 방식이다.

보통 데이터가 변경되면 서버로 부터 웹페이지 전체가 반환되어야 하지만

AJAX를 사용하면 페이지 일부만을 갱신하여 동일한 효과를 낼 수 있다.

 

이러한 이유 덕분에 주로 사용되며 빠르고 부드러운 화면 효과를 기대할 수 있다.

 

 

 

Callback 함수

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

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

 

위 코드를 보면 특정 로직이 끝났을 때 원하는 동작을 실행시키는 모습을 볼 수 있습니다.

데이터가 준비된 시점에서만 원하는 동작을 수행할 수 있으며 대기 시간동안 다른 일을 수행하므로 효율적입니다.

 

하지만 콜백 함수를 연속해서 사용할 경우 콜백 안에 콜백을 계속 무는 형태가 되고

이는 가독성이 좋지 않기 때문에 콜백 지옥이라고 불립니다.

 

이러한 문제를 해결하기 위하여 promise나 async/await을 사용할 수 있습니다.

 

 

Promise

생성자 함수를 통해 인스턴스화 되며, 총 3가지 상태를 갖습니다.

대기 : 아직 비동기 로직이 완료되지 않은 상태

이행 : 처리가 완료되어 값을 반환한 상태

실패 : 처리가 실패하거나 오류가 발생한 상태

 

resolve, reject를 인자로 가지며 then()을 이용하여 해결되었을 때, 그리고 실패하였을 때 이벤트 처리를 할 수 있습니다.

콜백 함수를 사용할 때 보다 예외처리가 간편하며 then()을 이용하여 다중 promise를 사용할 수 있습니다.

 

 

Async/Await

 

async와 await은 비동기 처리 패턴 중 가장 최근에 나온 문법으로, promise의 단점을 보완합니다.

가장 큰 특징은 동기적 흐름으로 비동기 처리 코드를 작성할 수 있다는 점입니다.

 

하지만 예외 처리 부분에서는 따로 try/catch를 사용하여 한다는 점이 promise와 다릅니다.