$q ist ein Service, welcher den Abruf von asynchronen Aufrufen vereinfacht.
Wenn nun $q dem globalen window Objekt Promise zugewiesen wird, „arbeitet“ AngularJs intern mit $q, wenn ein ES6 Promise genutzt wird.
angular.module('app').run(['$q', function ($q) {
window['Promise'] = $q;
}]);
Als Beispiel wird folgend ein Aufruf an eine fake online API implementiert.
getItems() {
return this.$http.get('https://jsonplaceholder.typicode.com/users');
}
Zu Demozwecken soll ein Array von items iteriert und deren Property name ausgegeben werden.
<ul>
<li ng-repeat="item in $ctrl.items">
{{ item.name }}
</li>
</ul>
Wenn nun die Funktion mittels await aufgerufen wird und anschließend das Array items mit res.data gesetzt wird, wird dies auch unverzüglich im View aktualisiert.
async init() {
try {
let res = await this.getItems();
this.items = res.data;
} catch (err) {
console.error(err);
}
}
Ersteller der Webseite MuchaDev. Selbstständiger IT Constultant für Frontend Technologien.