콜백함수

0625 콜백함수

비동기처리

 

콜백함수의필요성

loadScript('/my/script.js'); // script.js엔 "function newFunction() {…}"이 있습니다.
newFunction(); // 함수가 존재하지 않는다는 에러가 발생합니다!

예를 들어 시간이 엄청 걸리는 처리를 자바스크립트한테 시켰는데 특정 코드를 실행시키고 그 다음걸 실행시켜야하는것임. 원래 자바스크립트한테 이걸 콜백처리를 안한채 그대로 시키면 시간이 긴 처리를 뒤로 보내버려서 그 다음코드를 실행시킨다면 에러가 나는데 이를 제어하는 것이 콜백함수인거임

loadScript > newFunction(loadScript안에있는) 
//이런게 콜백.

이런식으로 콜백선언을 하면 해결할수있음

loadScript('/my/script.js', function() {
// 콜백 함수는 스크립트 로드가 끝나면 실행됩니다.
newFunction(); // 이제 함수 호출이 제대로 동작합니다.
...
});

그런데 이런건 콜백지옥을 낳을 수 있음 (이거 실행하고(이거실행하고(또이거실행해))) < 이렇게

loadScript('/my/script.js', function(script) {

  alert(`${script.src}을 로딩했습니다. 이젠, 다음 스크립트를 로딩합시다.`);

  loadScript('/my/script2.js', function(script) {
    alert(`두 번째 스크립트를 성공적으로 로딩했습니다.`);
  });

});

// 콜백속의 콜백

 

그런데 에러가 나면 전부 못불러오는거니

// 에러 핸들링
function loadScript(src, callback) {
  let script = document.createElement('script');
  script.src = src;

  script.onload = () => callback(null, script);
  script.onerror = () => callback(new Error(`${src}를 불러오는 도중에 에러가 발생했습니다.`));

  document.head.append(script);
}

오류 우선 콜백(error-first callback)

// 개선된 에러 핸들링
loadScript('/my/script.js', function(error, script) {
  if (error) {
    // 에러 처리
  } else {
    // 스크립트 로딩이 성공적으로 끝남
  }
});

이런식으로 에러 핸들링을 해줘야함