[자바스크립트(javascript)]비동기 처리 및 콜백 함수

비동기 처리

자바스크립트의 비동기 처리는 특정 코드의 연산이 종료될때까지 실행을 멈추지 않고 다음코드를 먼저 실행하는 자바스크립트 특성이다.

 

Ajax를 이용한 비동기 처리

웹서비스를 구축할때 form 과 ajax를 이용하여 동적 서비스를 유지한다. 그때 데이터를 비동기적으로 받아할경우에는 ajax를 이용한다 아래와같이

fuction getData(){

var getdata;
$.ajax({
			url: "/commonServlet",
			dataType: "JSON",
			type: "POST",
			data: {

				id:"kkk",
				name : "111",


			},
			success: function(data){
				getdata =data;
	

			},error: function(xhr,status,error){
				console.log("error");
				console.log(xhr,status,error);
			}
		});
        
        return getdata;

        }

 

위 같은 코드는 getData()함수를 실행하면 commonServlet에 post방식으로 id,name을 전달하고 컨트롤러나 서블릿을 통해 정제된  JSON데이터를 받는 코드이다.

만약 이코드를 실행하면 getdata 에 제대로된 data가 담길수 있을까?

정답은 아니다!

 

왜냐하면 위에서 말했듯이 ajax는 비동기 통신이다 그러므로 var getdata가 선언된뒤 ajax통신이 실행되고 ajax가 컨트롤러에서 데이터를 return 받기전에 getData()함수가 getdata를 return후 이미 종료되기 때문이다.

그러므로 getdata에는 undifined값이 전달될것이다. 

 

그렇다면 왜 비동기 처리가 필요할까? 예를 들어 웹서비스 같은경우에는 화면이 존재하고 화면에서 서버로 데이터를 요청했을때 서버가 언제 응답을 줄지 모른다면 사용자는 무한히 정지된 화면을보면 멍때리고 있을것이다.

그렇기에 비동기처리를 통해 데이터가 오던말던 하던 작업을하다가 데이터가오면 화면을 변경하는등에 작업을 하는것이다.

 

그렇다면 이러한 문제점을 어떻게 극복할수있을까?

 

 

 

 

콜백 함수

콜백함수는 비동기 코드안에 함수를 넣는 방식으로 구성된다 예를 보자.

 

fuction getData(callbackfunc){

	$.ajax({
			url: "/commonServlet",
			dataType: "JSON",
			type: "POST",
			data: {

				id:"kkk",
				name : "111",


			},
			success: function(data){
				callbackfunc(data);
	

			},error: function(xhr,status,error){
				console.log("error");
				console.log(xhr,status,error);
			}
		});
}

getData(function(getdata){
	console.log(getdata);
})

위코드를 보면 success 안에 callbackfunc(data)를 볼수있다. 이것이 뭐냐면

 

getData함수를 실행할때 그안에 함수 파라미터를 넣어서 success가 끝나면 즉, 서버에서 데이터가 전송되면 callbackfunc함수를 실행하여 console.log(getdata);를 실행하는거다. 이렇게하면 동기적으로 데이터 처리가 가능하다.