Verwendung von q all in AngularJs
Wir werden Promises in AngularJs einführen und was $q.all in AngularJs ist.
Was sind Versprechen in AngularJs?
Wenn wir eine HTTP-Anfrage für eine Reihe von asynchronen Funktionen stellen, kann es zu einem Netzwerkausfall kommen, und wir müssen callback und errorCallback verwenden. Wenn wir eine lange Funktion oder mehrere Funktionen haben, müssen wir möglicherweise mehrere callback und errorCallback verwenden, um unseren Code chaotisch zu machen.
Promises helfen uns, asynchrone Funktionen in Serie auszuführen, ohne unseren Code durcheinander zu bringen. Promises werden vom eingebauten Dienst $q bereitgestellt.
Was ist $q.all und wie wird es in AngularJs verwendet?
Wie der Name von $q.all schon sagt, kombiniert es mehrere Versprechen zu einem einzigen Versprechen, das aufgelöst wird, wenn alle aufgelöst werden.
Lassen Sie uns ein Beispiel haben, um zu verstehen, wie wir $q.all verwenden können. Lassen Sie uns zwei Variablen pR45 und pR55 erstellen.
# angularjs
angular.module("app",[])
.run(function($q) {
var pR45 = $q.when(45);
var pR55 = $q.when(55);
});
});
Lassen Sie uns nun $q.all verwenden, um die Werte der Variablen in der Konsole zu protokollieren.
# 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);
});
});
Im obigen Code nimmt $q.all alle Variablen, die wir ihm übergeben werden, und sobald alle aufgelöst sind, speichert es die Ergebnisse dieser Variablen in den neuen Variablen r45 und r55, und dann können wir diese Ergebnisse in unserer Funktion verwenden, wie im obigen Code gezeigt.
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app"></body>
Führen Sie den obigen HTML-Code und das AngularJS-Skript aus, dann erhalten Sie die folgende Ausgabe.
Wir können die Funktion $q.all verwenden, um in diesen einfachen Schritten asynchrone Funktionen auszuführen.
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