Use ES7 async/await syntax with angular 1.x

Downloads in past


19101.1.27 years ago7 years agoMinified + gzip package size for angular-async-await in KB




This module provides a service that wraps user defined async functions, and allows them to await operations that update the view model without needing to manually trigger a $digest cycle.

The problem

Consider the following controller logic, where ``UserService.getUser()`` returns a promise:
let vm = this;
vm.user = {name: ""};

vm.getUser = async function(userName) {
  vm.user = await UserService.getUser(userName);
  console.log(; // --> "foo";

This code appears to function correctly, but the changes will not be reflected in the view until a $digest cycle occurs. Invoking ``$scope.$apply()`` will fix that problem, but then you end up with stuff like this everywhere:
vm.getUser = async function(userName) {
  vm.user = await UserService.getUser(userName);
  $scope.$apply();  // don't forget this!

The solution.

Let ``$async`` take care of it for you.
"use strict";

let SampleViewCtrl = ['DummyService', '$async', function (DummyService, $async) {
  let vm = this;
  vm.user = {};

  vm.getUser = $async(async function (userName) {
    vm.user = await DummyService.getUser(userName);
    // vm.user is now updated in the view
  vm.getUser("Ben Hansen");

export default SampleViewCtrl;

Getting started

NOTE: This module assumes you already have babel configured properly for async/await support. Take a look at this projects .babelrc file for a list of the required plugins.
1.) Install the package
npm install angular-async-await

2.) Import the module
import "angular-async-await";

3.) Add the module to your apps dependency list
angular.module('myApp', [

4.) Inject the ``$async`` service when required (typically in a controller and/or directive).