0

I am having an issue with race conditions inside of my angular app.

I figure I can solve this by awaiting the get request whose response the second get request depends upon.

That being said I have been having trouble making the controller function async, when I define an async function and pass it in as the controller function – the page does not load at all.

Here is a basic view of the app with the single controller

angular.module('myApp', [
  'ngRoute',
  'myApp.home',
  'angularMoment'
]).
constant("ROOT_API","https://" + window.location.host + shortpath + "/").
controller('NavigationController', navCtrlCall).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.otherwise({redirectTo: '/'});
}])

Here is the controller function

async function navCtrlCall($scope, $http, ROOT_API, $location, $window){

      async function setValues(){
        $scope.$location = $location;
        $scope.root = window.location.href.replace(window.location.hash, '');
        $scope.loggedIn = sessionStorage.getItem("uid") != null;
        var appId = await $http.get(ROOT_API+"webapi/public/admin/attribute/websiteAppId").toPromise();
        $scope.appId = appId.data.replace(new RegExp(/^"/), "").replace(new RegExp(/"$/), "");
      }

      await setValues();
}

$scope.appId is the variable that i need set for the second get request to work, otherwise it passes in 'undefined'.

The second controller that makes the next get request

'use strict';

angular.module('myApp.home', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: 'modules/home/home.html',
    controller: 'HomeCtrl'
  });
}])

.controller('HomeCtrl', ["$scope", "$http", "ROOT_API", function($scope,$http,ROOT_API) {

  var today = new Date();
  var milisec = today.getTime();

  $http.get(ROOT_API+"webapi/public/events/" + $scope.appId, {
    params: {
      fromDate: milisec
    }
  }).success(
      function(data){
        $scope.events = data.slice(0,5);
      }
  );
}]);
0TTT0
  • 1,288
  • 1
  • 13
  • 23
  • the second get does not use `$scope.appId` at all - by the way, does `$http.get` return a Promise? - you seem to use it once like it does, but the second time you use it, you use a `.success` method - so, it doesn't look like a Promise is returned (which is what `await` waits for) – Jaromanda X Dec 22 '19 at 01:09
  • @JaromandaX yes you are correct about not returning a promise, I am supposed to tack the .toPromise() method on the end – 0TTT0 Dec 22 '19 at 03:50
  • @JaromandaX, also i've added the second controller that makes the get request using ```$scope.appId``` – 0TTT0 Dec 22 '19 at 03:54
  • The `.success` method has been [removed from the AngularJS framework](https://stackoverflow.com/questions/35329384/why-are-angularjs-http-success-error-methods-deprecated-removed-from-v1-6/35331339#35331339). The `$http` service returns AngularJS promises and they do not have a method named `toPromise`. – georgeawg Dec 22 '19 at 03:56
  • The ES6 promises returned by `async`/`await` are not integrated with the AngularJS framework. AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc. – georgeawg Dec 22 '19 at 04:00
  • VM624:1 Uncaught ReferenceError: `shortpath` is not defined. Where does the code define `shortpath`? – georgeawg Dec 22 '19 at 04:20

0 Answers0