AngularJs에서 q all 사용
AngularJs의 promises와 AngularJs의 $q.all이 무엇인지 소개합니다.
AngularJs에서 Promise란 무엇입니까?
일련의 비동기 기능에 대해 HTTP 요청을 하면 네트워크 오류가 발생할 수 있으며 callback 및 errorCallback을 사용해야 합니다. 긴 함수나 여러 함수가 있는 경우 코드를 지저분하게 만들기 위해 여러 callback과 errorCallback을 사용해야 할 수도 있습니다.
Promise는 코드를 엉망으로 만들지 않고 비동기 함수를 연속적으로 실행하는 데 도움이 됩니다. 약속은 기본 제공 서비스 $q에 의해 제공됩니다.
$q.all이란 무엇이며 AngularJ에서 사용하는 방법은 무엇입니까?
$q.all이라는 이름에서 알 수 있듯 여러 Promise를 모두 해결하면 해결되는 하나의 Promise로 결합합니다.
$q.all을 사용하는 방법을 이해하기 위해 예를 들어 보겠습니다. 두 개의 변수 pR45와 pR55를 생성해 보겠습니다.
# angularjs
angular.module("app",[])
.run(function($q) {
var pR45 = $q.when(45);
var pR55 = $q.when(55);
});
});
이제 $q.all을 사용하여 콘솔에 변수 값을 기록해 보겠습니다.
# angularjs
angular.module("app",[])
.run(function($q) {
var pR45 = $q.when(45);
var pR55 = $q.when(55);
$q.all([pR45,pR55]).then(function([r45,r55]) {
console.log(r45);
console.log(r55);
});
});
위의 코드에서 $q.all은 우리가 그에게 전달할 모든 변수를 가져오고 모든 변수가 해결되면 이 변수의 결과를 새 변수 r45 및 r55에 저장합니다. 그런 다음 위의 코드와 같이 함수에서 이 결과를 사용할 수 있습니다.
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app"></body>
위의 HTML 코드와 AngularJS 스크립트를 실행하면 다음과 같은 출력을 얻을 수 있습니다.
$q.all 기능을 사용하여 이러한 쉬운 단계에서 비동기 기능을 실행할 수 있습니다.
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn