비동기콜백

서버에 데이터를 요청했을때 요청한 데이터를 전부 받은후에 해야할 작업이 있다고 하자.

요청한 데이터를 전부 받았는지를 누가 알까?

알 수 있는 방법을 브라우저가 제공하지 않는한 클라이언트에서는 알 수가 없다.

그렇다면 브라우저가 그러한 방법을 제공하는가?

다행히도 제공한다.

오래된 방법으로 비동기콜백방식이 있다.

function loadScript(src:string,fn:any){
  let e =document.createElement('script');
  e.src = src;
  document.head.append(e);
  e.onload = fn;
}
function callback(){
	console.log('load complete');
}
loadScript('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js',callback);

내장class HTMLScriptElement는 onload 이벤트핸들러에 callback함수를 설정하면 로드가 완료되었을때 이벤트를 발생시켜준다.

몇가지 설정과 이벤트핸들러에 콜백함수를 설정만하면 된다.
아주 쉽고 간단히 원하는 작업을 수행할 수 있는것처럼 보인다.

비동기콜백방식은 여러개의 비동기콜백이 연속적으로 발생해야 할때 가독성이 급격히 떨어지고 유지보수에 어렵게만드는 큰 단점이 있다.

간단한 비동기작업은 비동기콜백으로 사용해도 된다.