8월 31일 (화) 비동기 (비동기 호출)

비동기 호출 (Asynchronous)

Callback

• 다름함수(A)의 전달인자(argument)로 넘겨주는 함수

function B() {
  console.log('call');
}
function A(callbak) {
  callbak(); // callback === B
}
A(B);

Parameter를 넘겨받는 함수(A)는 callback 함수(B)를 필요에 따라 즉시 실행(synchronously)할수도 있고, 아니면 나중에 (asynchronously) 실행할 수도 있다.

중요!!

Callback사용시 함수실행을 연결하는 것이 아닌 함수 자체를 연결 해야한다

function handleClick() {
  console.log('button clicked');
};
// 함수 자체를 연결한 경우
document.querySelector('#btn').onclick = handleClick;
document.querySelector('#btn').onclick = function() {
  handleClick();
}
document.querySelector('#btn').onclick = handleClick.bind()

함수 실행을 연결한 경우

document.querySelector('#btn').onclick = handleClick();

handleClick()의 실행의 결과는 위의 함수와 같이 return 값이 없기 때문에 undefiend이다.

blocking vs non-blocking

blocking

• 즉시 시행
• 요청에 대한 결과가 동시에 일어난다(synchronous)

non-blocking

• 나중에 시행
• 요청에 대한 결과가 동시에 일어나지 않는다(Asynchronous)

동기 vs 비동기

동기
요청에 대한 결과가 동시에 일어난다.

동기 커피주문 예
1. 손님 1이 아메리카노를 주문한다
2. 접수를 받은 직원이 아메리카노를 내린다
3. 직원이 손님 1에게 아메리카노를 전달한다
4. 손님 2가 카페라떼를 주문한다
5. 접수를 받은 직원이 카페라떼를 만든다
6. 직원이 손님 2에게 카페라떼를 전달한다

비동기
요청에 대한 결과가 동시에 일어나지 않는다.

비동기 커피주문 예
1. 손님 1이 아메리카노를 주문한다

• 접수를 받은 직원이 아메리카노를 내린다
• 아메리카노가 완정되면 직원이 손님 1을 부른다
• 직원이 손님 1에게 아메리카노를 전달한다

2. 손님 2가 카페라떼를 주문한다

• 접수를 받은 직원이 카페라떼를 만든다
• 카페라떼가 완선되면 직원이 손님 2를 부른다
• 직원이 손님 2에게 카페라떼를 전달한다

요청에 blocking이 없다
응답이 비동기적으로 이뤄진다

동기 VS 비동기 코드비교

비동기 함수 전달 패턴 1: callback 패턴

let request = 'caffelatte';
orderCoffeeAsync(request, function(response) {
// response -> 주문한 커피 결과
  drink(response);
});

비동기 함수 전달 패턴 2: 이벤트 등록 패턴

let request = 'caffelatte';
orderCoffeeAsync(request).onready =  function(response) {
// response -> 주문한 커피 결과
  drink(response);
};

비동기의 주요 사례

• DOM Element의 이벤트 핸들러
  -마우스, 키보드 입력(click, keydown 등)
  -페이지 로딩 (DOMContentLoaded 등)
• 타이머
  -타이머 API (setTimeout 등)
  -애니메이션 API (requestAnimationFrame)
• 서버에 자원 요청 및 응답
  -fetch API
  -AJAX (XHR)