angular-async-await

Use ES7 async/await syntax with angular 1.x

Downloads in past

Stats

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

Readme

angular-async-await

Overview

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(vm.user.name); // --> "foo";
}

vm.getUser("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', [
  'angular-async-await'
])

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