이번 AngularJS 교육을 들으면서
가장 주의 깊게 들었어야 할 내용이
$q라는 모듈이었는데 하필
그 내용이 나올 때만 조는 바람에...
지금 다시 한 번 예제를 보고 이해해
보려고 노력하는 중입니다...
$q와 $timeout을 이용한 간단한 예제인데
해당 예제는 카페에 올려 놓았습니다.
올려 놓은 AngularJS 예제를 간단하게
설명을 드리자면 간단한 문제의 답을
특정 시간 안에 입력을 해야 되고,
시간이 지난 후에 입력한 결과가 정답인지
아닌지를 보여주는 예제입니다.
이 때 $q의 쓰임과 $timeout의 쓰임을
설명드리자면....
일단 $timeout은 일정 시간 후에 특정
함수가 실행되도록 하는 기능을 제공하고,
$q는 $q 객체에 어떤 값이 binding 되거나
실패할 때까지 대기를 하다가 정상/비정상
적인 처리가 수행되면 promise 라는
객체를 return 해주는 모듈입니다.
즉 timeout 이 걸려 특정 시간 후에
결과를 토해내는 function 으로부터
결과가 올 때까지 대기하다가 값이
오면 바로 promise라는 걸 리턴해주는
AngularjS 예제입니다.
위에서 말씀드렸 듯이 이 예제는
pdReport 카페에 올려 놓았으니
필요하신 분은 자유롭게 받으셔어
구동해 보시기 바랍니다!!!
>Click<
Factory
먼저 promiseTest라는 이름의 팩토리
코드를 보도록 하겠습니다.
defered 라는 q 객체가 생성되었고,
2초 뒤에 파라미터 값을 그대로
출력하는 function도 하나가 팩토리
안에 있습니다.
화면에서 입력한 answer 값이39이냐
아니냐에 따라 아래와 같은 세 가지
결과 값이 있습니다.
'정답입니다.'
'오답입니다.'
'너무 어렵나요'
그런데 위에 값들을 q의 객체 deferd라는
함수에 파라미터로 넣어주고 있고,
최종적으로는 promise라는 값을
return 해주고 있습니다. 일단 timer라는
변수에 값이 할당이 되어야 하는데
바로 할당이 되는게 아니고 $timeout 을
이용해 2초 후에 할당이 되고 있습니다.
이 2초동안 q의 객체 defered는 결과가
성공이나 실패가 날 때까지 기다렸다가
성공/실패가 나면 그제서야 promise라는
객체를 리턴하는 겁니다. function 수행
결과가 정상이면 resolve, 비정상이면
reject 함수가 호출이 된다고 합니다.
Controller
이번에는 컨트롤러입니다.
promiseTest 팩토리를 주입 받은
컨트롤러에서는 factory에서 넘겨주는
q 함수를 실행해서 그 결과를
$scope.result에 할당 받습니다.
이 때 $scope.result에 할당 되는
값에 경우는 아래와 같이
두 가지 case가 있습니다.
성공/실패
정상적인 경우는 factory에서
resolve함수가 호출된 경우이고,
실패인 경우는 factory에서
reject 함수가 호출된 경우입니다.
reject가 호출되는 경우는
$timeout 모듈을 종료시킨 경우로
promistTest.giveUp을 호출해주면
reject가 호출 됩니다.
그리고 controller의 밑부분을 보시면
finally 라는 부분이 있는데 이 부분은
성공이든 실패든 무조건 수행되는
부분입니다. 자바에서 try-catch-finally
문의 finally와 같은 기능을 하는 것이지요
그래서 최종적으로는 $scope.result와
$scope.info 에 각각 결과가 할당됩니다.
No comments:
Post a Comment