Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Stuey 3 posts 73 karma points
    Apr 24, 2017 @ 10:55
    Stuey
    0

    promise waiting for AuthTimeout service before it resolves.

    I'm writing an AngularJS plugin for Umbraco and have created a simple view, controller and service. But for some reason my promise is taking a while to resolve.

    I have used the inbuilt $q service to create and return my promise, I have logged out my variables and can see when the async service finishes but there is a noticeable time difference between that and the resolve function being called.

    I have since discovered the promise looks like it is waiting for Umbracos GetRemainingTimeout service before it resolves.

    Can someone explain why this might be happening?

    viewController.js

    angular.module('umbraco')
      .controller('JaywingAnalyticsHelper.ViewController', function ($scope, googleService) {
        googleService.checkAuth().then(function (signedIn){
          $scope.isAuthorised = signedIn;
          console.log(signedIn);
        });
      });
    

    googleService.js

    angular.module("umbraco")
      .service('googleService', function ($q) {
    
        var clientId = 'REMOVED_FOR_PRIVACY',
          scopes = ['https://www.googleapis.com/auth/analytics.readonly'],
          deferred = $q.defer();
    
        this.checkAuth = function () {
          gapi.load('auth2', function () {
            gapi.auth2.init().then(function () {
              var googleAuth = gapi.auth2.getAuthInstance();
              var signedIn = googleAuth.isSignedIn.get();
              console.log(signedIn);
              deferred.resolve(signedIn);
            }, function(){
              deferred.reject(false);
            });
          });
    
          return deferred.promise;
        };
      });
    

    Umbraco version - 7.5.12
    Angular version - 1.1.5

  • Stuey 3 posts 73 karma points
    May 09, 2017 @ 13:57
    Stuey
    0

    After finding some time to revisit this issue I have discovered the cause of why the promise was taking so long to respond.

    Most endpoints can be reached within angular by using the $http service but gapi uses its own methods to make the requests and due to the angular life-cycle it is important to call $apply which prompts angular to update any bindings or watchers.

    Two links here to the documentation and another great resource: https://code.angularjs.org/1.1.5/docs/api/ng.$rootScope.Scope#$apply http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

    This was annoyingly simple and can only be blamed on my lack of angular knowledge. In my case the promise was waiting for angular to get to a certain point in its life-cycle before resolving the promise rather than updating instantly. Wrapping it in the apply function fixes this problem.

    $rootScope.$apply(function(){
      deferred.resolve(signedIn);
    });
    

    For those interested there was a number of steps which led me to diagnosing this issue, including:

    • Moving the gapi call out of the service and back into the controller

      This didn't have any effect, and the promise was still taking a while to resolve.

    • Swapping out the gapi call for a setTimeout

      Again this didn't have any effect, and the promise was still taking a while to resolve but did show that the issue wasn't directly related to gapi.

    • Adding multiple setTimeouts of different lengths

      This was the next step as it proved that the promises were resolving at the same time even though they should be seconds apart. Two important discoveries came out of this. Interacting with the view caused the promises to resolve (some kind of life-cycle trigger) and that there is an angular version of setTimeout called $timeout

    • Read into why $timeout exists

      This led to learning more about the angular life-cycle and the $apply function why and when to use it. Problem solved.

Please Sign in or register to post replies

Write your reply to:

Draft