$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

nagasun/ng-async