AngularJs async und await verwenden

Tutorial AngularJs

von Ardian Shala, 08.02.2019
Async und await kann in AngularJs nur in Verbindung mit $scope verwendet werden, damit Änderungen im View aktualisiert werden.
Durch die Zuweisung von $q dem window.Promise Object wird intern $q verwendet.
Vorraussetzung:
  • AngularJs - link
  • $q Verständnis - link

Downloads:

Stackblitz Demo

$q als Promise registrieren

$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;
}]);

Asynchrone Funktion definieren

Als Beispiel wird folgend ein Aufruf an eine fake online API implementiert.

getItems() {
    return this.$http.get('https://jsonplaceholder.typicode.com/users');
}

Html definieren

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>

async und await verwenden

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);
    }
}
#$q #angularjs #async #await #promise

Autor: Ardian Shala

Ersteller der Webseite MuchaDev. Selbstständiger IT Constultant für Frontend Technologien.