비동기 처리

 동기처리 ; 순차적으로 일을 처리한다. (코드가 위에서 부터 아래로 진행된다.)

 

 비동기 처리 : 병렬적으로 일을 처리한다.

 

웹개발 등을 할때 자주 사용하게 되는 ajax 같은 http 통신들은 비동기적으로 작동하게 되어있는데,

이를 동기적으로 처리해야할때가 있다. 예를들어  다음과 같은 로직일때는 동기적 작동이 필수이다.

  1. 유저데이터들을 get한다.

  2. 특정유저의 아이디로 유저정보를 get한다.

  3. 해당 유저의 이메일로 작성된 게시글을 get한다.

 

위의 로직이 비동기로 처리된다면 3번이 먼저실행될수도있다. 그럴떈, 유저의 email이 undefined 뜨겟지?

그래서 비동기처리가 나온것이다.

 

이를 처리하는 방법은 기본적으로 CallBack 함수이다.

---

 [1] Callback 함수 (비동기함수를 동기적으로 사용할수 있게 해주는 방법 1)

  다음과 같이 삼수의 인자로 함수를 넣어주는것인데,

이전 함수의 결과를 파라미터로 받아서 작성할수 있다. 

 

하지만 아래에서 볼 수 있듯이 콜백에 콜백을 물면 상당히 코드가 늘어나는 것을 볼수있다

이를 콜백헬 (콜백지옥)이라고 부른다.

 

이를해결하기 위해서 ES6 에서 promise를, ES7에서 aysnc,await을 개발해 놓았다.

function asyncfunc1(){
	setTimeOut( function(){}, 100);
}
function asyncfunc2(){
	setTimeOut( function(){}, 100);
}
function asyncfunc3(){
	setTimeOut( function(){}, 100);
}
function asyncfunc4(){
	setTimeOut( function(){}, 100);
}
function asyncfunc5(){
	setTimeOut( function(){}, 100);
}
asyncfunc1( function(result) {
	asyncfunc2( function(result) {
    	asyncfunc3( function(result) {
        	asyncfunc4( function(result) {
            	asyncfunc5( function(result) {
                });
            });
        });
    });
});

---

 [2] Promise  (비동기함수를 동기적으로 사용할수 있게 해주는 방법 2)

 

http://nene365.com/