Deferred object

Deferred Object
이항희 ## javarouka@gmail.com

JavaScript 작업 처리
● JavaScript는 한번에 하나의 작업만 처리한다.
● 오래 걸리는 작업이 진행된다면 끝날 때까지 나머지 작
업은 전부 중단된다.
// 주당이 따로없다.
var i = 0,
beerCargo = document.getElementById( “beerCargo”);
while (Number.MAX_VALUE > i) {
beerCargo.innerHTML += “drink ” + i + “ beer!<br/>”;
i++;
}

작업 Queue
1. 프로그램이 시작되면 이벤트 루프도 시작된다.
2. 작업이 발생할 경우 FIFO Queue 에 입력된다.
3. 이벤트 루프는 매번 작업 Queue 를 조사하고, 작업이 있다면 하나 꺼내 처
리한다.
4. 다시 이벤트 루프의 처음으로

택배기사에게 전화 오면.

그럼, JavaScript에서
작업의 끝은 언제?

그런데 뭐가 문제라고?
● callbackhell.com

콜백의 끝없는 중첩
● 코드 읽기가 힘들다.
● 작업과 후처리의 강한 결합
○ 로직 처리 함수는 콜백에 대한 처리 의무까지 지게 된다.
○ 콜백이 비어있거나 다른 타입이거나 하는 예외 처리 비용.

약속
주말에 저랑 데이
트 하실래요?
저 주말 출근이 언
제 끝날지 모르니
까, then 메서드에
등록해줘요.
?

Promise/A
http://wiki.commonjs.org/wiki/Promises/A

Promise/A - 흐름
● 비동기 함수를 실행하면 비동기 작업을 작업자에게 맡기고, 약속 객체를 반
환한다.
● 비동기 작업의 후처리 작업을 약속 객체에 등록한다
● 비동기 작업이 종료되면 약속 객체는 작업 Queue 에 자신에게 등록된 작업
을 넣는다
● Event Loop 에서는 작업 Queue를 처리하며 후처리 실행.

구현체
● jQuery Deferred Object
○ http://api.jquery.com/category/deferred-object/
● AngularJS $q
○ https://docs.angularjs.org/api/ng/service/$q

jQuery의 Ajax
$.ajax({
url: "test.html",
context: document.body,
success: function() {
$( this ).addClass( "done" );
},
error: function() {
alert( "opps!!!!" );
}
);

Deferred!
var promise = $.ajax({
url: "test.html",
context: document.body
});
promise.done(function() {
$( this ).addClass( "done" );
});
promise.fail(function() {
alert( "opps!!!!" );
});

약속은 기록된다.
● Promise 객체는 한번 얻고 나면 언제든 재활용할 수 있다.
○ 데이터를 얻어오고 바로 사용할 필요 없이 사용할 시점을 호출자가 정
할 수 있다.
○ 여러 작업의 결과를 변수에 담아두고 재활용이 가능하다.
○ HTML 조각, 동적 스크립트 텍스트, 공통 데이터...

Multi Complete
● 유저의 구매 정보를 화면에 표시해야 하는데 유저의 정보는 회원 API로, 구
매 정보는 구매 API로, 상품 정보는 상품 API 로 요청한 뒤 모든 요청이 완
료되면 서로간의 데이터를 잘 섞어서 필요 데이터를 도출하여 화면에 표시
해야 한다.
○ 그런데 각 요청이 언제 끝났는지 체크해볼까?

$.when
var userPromise = $.get("/user"),
orderPromise = $.get("/order"),
productPromise = $.get("/product");
$.when(userPromise, orderPromise, productPromise)
.done(function() {
...
})
.fail(function() {
...
});

간단히 표준을 구현해본 예제
● 코드
○ https://github.com/javarouka/javarouka.github.
com/blob/master/javascript/deferred.html
● 페이지
○ http://javarouka.github.io/javascript/deferred.html

Deferred object

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Deferred object

Ähnlich wie Deferred object (20)

Deferred object