비동기 호출

이재진·2020년 10월 4일
0

콜백함수

  • 다른 함수(A)의 전달인자(argument)로 넘겨주는 함수(B)
  • parameter를 넘겨받는 함수(A)는 콜백함수(B)를 필요에 따라 즉시 실행(synchronously)할수도 있고, 아니면 나중에(asynchronously) 실행할 수도 있다.
function B() {
  console.log("called at the back!");
}

function A(callback) {
  callback(); //callback === B
}

A(B);

blocking vs non-blocking

커피 주문으로 알아보는 동기 vs 비동기

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

  1. 손님 1이 아메리카노를 주문한다.
  2. 접수를 받은 직원이 아메리카노를 내린다.
  3. 직원이 손님 1에게 아메리카노를 전달한다.
  4. 손님 2가 카페라떼를 주문한다.
    (손님 2는 손님 1이 아메리카노를 전달받을 때까지 주문도 하지못하고 대기열에 머물러 있어야 함.)
  5. 접수를 받은 직원이 카페라떼를 만든다.
  6. 직원이 손님 2에게 카페라떼를 전달한다.

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

  1. 손님 1이 아메리카노를 주문한다.

    1. 접수를 받은 직원이 아메리카노를 내린다.
    2. 아메리카노가 완성되면 직원이 손님 1을 부른다. //callback
    3. 직원이 손님 1에게 아메리카노를 전달한다.
  2. 손님 2가 카페라떼를 주문한다.

    1. 접수를 받은 직원이 카페라떼를 만든다.
    2. 카페라떼가 완성되면 직원이 손님 2을 부른다. //callback
    3. 직원이 손님 2에게 카페라떼를 전달한다.

<특징>
요청에 blocking이 없다.
응답이 비동기적으로 이뤄진다.
주문에 의한 콜백이 나중에 실행.

비동기 함수 전달 패턴

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

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

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

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

0개의 댓글