Utiliser q all dans AngularJs
Nous allons introduire les promesses dans AngularJs et ce qu’est $q.all dans AngularJs.
Que sont les promesses dans AngularJs ?
Si nous faisons une requête HTTP pour une série de fonctions asynchrones, il peut y avoir une panne de réseau, et nous devons utiliser callback et errorCallback. Si nous avons une fonction longue ou plusieurs fonctions, nous devrons peut-être utiliser plusieurs callback et errorCallback pour rendre notre code désordonné.
Les promesses nous aident à exécuter des fonctions asynchrones en série sans gâcher notre code. Les promesses sont fournies par le service intégré $q.
Qu’est-ce que $q.all et comment l’utiliser dans AngularJs ?
Comme le nom de $q.all le suggère, il combine plusieurs promesses en une seule promesse résolue lorsqu’elles sont toutes résolues.
Prenons un exemple pour comprendre comment on peut utiliser $q.all. Créons deux variables pR45 et pR55.
# angularjs
angular.module("app",[])
.run(function($q) {
var pR45 = $q.when(45);
var pR55 = $q.when(55);
});
});
Utilisons maintenant $q.all pour enregistrer les valeurs des variables dans la console.
# 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);
});
});
Dans le code ci-dessus, $q.all prendra toutes les variables que nous lui passerons, et une fois toutes résolues, il stockera les résultats de ces variables dans de nouvelles variables r45 et r55, puis nous pouvons utiliser ces résultats dans notre fonction comme indiqué dans le code ci-dessus.
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app"></body>
Exécutez le code HTML ci-dessus et le script AngularJS, vous obtiendrez la sortie suivante.
Nous pouvons utiliser la fonction $q.all pour exécuter des fonctions asynchrones dans ces étapes simples.
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