ng-async

$async

$async is an async/await implementation based on generators for use with angular.

Install

npm install ng-async

Usage

As service

import ngAsync from 'ng-async';
 
angular.module('my-module', [ngAsync.name])
    .controller('my-controller', function($async) {
        const init = $async(function*() {
            const { data : users } = yield $http.get('/users');
            $scope.users = users;
        });
    });

To wrap a service/controller

import ngAsync, { $async } from 'ng-async';
 
angular.module('my-module', [ngAsync.name])
    .controller('my-controller', $async(function*($http) {
        'ngInject';
        const { data : users } = yield $http.get('/users');
        $scope.users = users;
    }));

Note: To wrap a service/controller it must be explicitly annotated. The example uses ng-annotate to do it for us.

Note: keep in mind that an $async function returns a promise, not a value. This is especially important with factories, since their return value will be used for injection.

Prerequisites

• ES6 support in either your host environment or your build chain. At minimum your environment should support the following:
  • Generators
  • Modules
  • Lambdas
  • const/let
  • Rest parameters
• Angular should be available to the module via the module loader with import 'angular'.
• Angular ^1.3.0

Why?

ES7 introduces async functions, which create a way to write asynchronous code with a synchronous syntax. Unfortunately this doesn't work well with Angular: code after a call to await does not run in the digest cycle, and thus it won't update the screen. To illustrate:

<ul>
    <li ng-repeat="user in users">
      {{ user.name }}
    </li>
</ul>

$scope.users = [];
async function init() {
    const { data : users } = await $http.get('/users');
    //This does not run in a digest cycle
    $scope.users = users;
}

Since the $scope.users = users; line does not run in a digest cycle, the view isn't updated. To solve this with async functions you need to put $scope.$apply calls after each awaited statement.

$async implements similar functionality with the help of generators in such a way that all code in an $async function does run in the digest cycle.

How should I use it?

Usage of $async is very similar to usage of plain async functions. Instead of creating an async function you should pass a generator function to $async, and where you would use await in an async function you now need to use yield. Additionally you don't need the $scope.$apply calls anymore.

//with async functions
async function foo() {
    $scope.someStuff = await getSomeStuffAsync();
    $scope.$apply();
    $scope.someOtherStuff = await getSomeOtherStuffAsync();
    $scope.$apply();
    console.log("we're done");
}
 
//equivalent with $async, but angular proof:
const foo = $async(function*() {
    $scope.someStuff = yield getSomeStuffAsync();
    $scope.someOtherStuff = yield getSomeOtherStuffAsync();
    console.log("we're done");
});

How can I pass arguments to an $async function and what happens with this?

Arguments are directly passed to the generator function and the this that is used to call the $async function will also be used for the generator function. Example:

const myObj = {
    bar : $async(function*(a, b) {
        console.log(`a: ${a}`);
        console.log(`b: ${b}`);
        console.log(`this === myObj: ${this === myObj}`);
    });
}
 
myObj.bar(1, 2);
//Outputs:
//a: 1
//b: 2
//this === myObj: true