[JS] 비동기처리(콜백함수)

자바스크립트에서 웹페이지를 구성할 때 비동기처리가 필요한 경우가 많다.

비동기처리시 필요한 콜백함수 문법은 다음과 같다.

 

 

[콜백함수 문법]

1. callback함수 full로 사용

// sayHello함수 정의
function sayHello(name, callback) {    
    callback(name);
}

// sayHello함수 사용
sayHello("myName", function temp(name) {
	console.log(name);
});

 

2. 함수이름 없이사용

// sayHello함수 정의
function sayHello(name, callback) {    
    callback(name);
}

// sayHello함수 사용
sayHello("myName", function (name) {
	console.log(name);
});

 

3. 화살표모양

// sayHello함수 정의
function sayHello(name, callback) {    
    callback(name);
}

// sayHello함수 사용
sayHello("myName", (name) => {
	console.log(name);
});

 

[콜백함수 예시]

1. ajax 결과값(api호출)

fetch(API_URL)
  .then(res => res.json())
  .then(data => {
          console.log(data);
   })
 .catch(err => {
  alert('에러가 발생했습니다. 잠시 후 다시 시도해 주세요.');
  })
}

 

2. onmount(onmount까지 가다린 후 콜백함수 호출)

  onMounted(() => {;
    store.function();
  })