Using Promises in AngularJS for chaining in two different controllers

Question

I have a provider for my REST-Services named MyRestServices :

app.provider('MyRestServices', function() {
  this.baseUrl = null;
  this.setBaseUrl = function(_baseUrl) {
    this.baseUrl = _baseUrl;
  };

  this.$get = ['$http', function($http) {
    var _baseUrl = this.baseUrl;

    function getMyData() {
      return $http.get(_baseUrl + 'data1/?token=' + token + '&key=' + key);
    }

    function preGetTokenAndKey() {
      return $http.get(_baseUrl + 'keyAndToken/');
    }

    return {
      getMyData: getMyData,
      preGetTokenAndKey: preGetTokenAndKey
    };
  }];
});

I configure it before calling the first REST service.

app.config(function(MyRestServicesProvider) {
  MyRestServicesProvider.setBaseUrl('https://www.test.com/rest/');
});

And then I have a HeadCtrl controller which should call preGetTokenAndKey to get key and token which is needed for some other REST calls like getMyData .

app.controller('HeadCtrl', function (MyRestServices) {
  MyRestServices.preGetTokenAndKey().success(function(data) {
    var key = data.dataSection.key;
    var token = data.dataSection.token;
  });
});

My problem is I want to call getMyData from another controller, but I need key and token to make this call. So I need to wait until preGetTokenAndKey was successful and I have to provide the two values to the MyRestServices provider. How can I solve these problems?

Answer 1

It sounds like a better solution would be to chain them within your service itself. You'd setup your own promise within preGetTokenAndKey, which gets resolved by the $http call. Subsequent calls to preGetTokenAndKey() would just return the already resolved data w/o making additional $http calls.

So something along the lines of the following should get you started:

app.provider('MyRestServices', function() {
  this.baseUrl = null;
  this.setBaseUrl = function(_baseUrl) {
      this.baseUrl = _baseUrl;
  };

  this.$get = ['$http', function($http) {
    var _baseUrl = this.baseUrl;
    var _tokenAndKey = {};

    function getMyData() {
      return preGetTokenAndKey().then(function (data) {
            return $http.get(_baseUrl + 'data1/?token=' + data.dataSection.token + '&key=' + data.dataSection.key);
      });
    }

    function preGetTokenAndKey() {
      if(!_tokenAndKey.set) {
           _tokenAndKey.deferred = $http.get(_baseUrl + 'keyAndToken/').then(function(data) {
                _tokenAndKey.set = true;
                return data;
           });
      }
      return _tokenAndKey.deferred.promise;
    }

    return {
      getMyData: getMyData,
      preGetTokenAndKey: preGetTokenAndKey
    };
  }];
});

Answer 2

My problem is I want to call getMyData from another controller,

If so, you can use $broadcast to notify other controller that async call resolved and you have key/token

app.controller('HeadCtrl', function($rootScope, MyRestServices) {
    MyRestServices.preGetTokenAndKey().success(function(data) {
        var key = data.dataSection.key;
        var token = data.dataSection.token;

        $rootScope.$broadcast("getMyDataTrigger", {key: key,token: token}); 
    });
});

In other controller implement listener:

$rootScope.$on("getMyDataTrigger", function(event, data){

        if(data){
           MyRestServices.getMyData(data.key, data.token);
           // ...
        }

    });

---

Just override getMyData :

function getMyData(key, token) {
  return $http.get(_baseUrl + 'data1/?token=' + token + '&key=' + key);
}