简体   繁体   中英

Convert JS Post Ajax to AngularJS Post Factory

I am trying to convert an Ajax call with WSSE authentication to an AngularJS factory. The method is Post .

The intended use of this is to access the Adobe Analytics Rest API and return data to be converted to JSON and then visualised with d3.js.

I am not familiar with the properties that can be used in an AngularJS $http post call and so not sure what is the correct way to do the WSSE auth , dataType , callback etc. This is the original ajax code which came from a public github repo:

(function($) {
  window.MarketingCloud = {
    env:   {},
    wsse:  new Wsse(),

    /** Make the api request */
    /* callback should follow standard jQuery request format:
     *    function callback(data)
     */
    makeRequest: function (username, secret, method, params, endpoint, callback)
    {
        var headers = MarketingCloud.wsse.generateAuth(username, secret);
        var url = 'https://'+endpoint+'/admin/1.4/rest/?method='+method;
        $.ajax(url, {
            type:'POST',
            data: params,
            complete: callback,
            dataType: "text",
            headers: {
                'X-WSSE': headers['X-WSSE']
            }
        });
    }
  };
})(jQuery);

This is the current way the code is being used with pure JS:

MarketingCloud.makeRequest(username, secret, method, params, endpoint, function(response) {
        data = JSON.parse(response.responseText);
});

I want to convert this to a factory and a controller respectively.

This is what I have done for the factory so far:

app.factory('mainFactory', ['$http', function($http) {
  var wsse = new Wsse ();
  return function(username, secret, method, params, endpoint) {
    return $http({
      method: 'POST',
      url: 'https://' + endpoint + '/admin/1.4/rest/?method=' + method,
      data: params,
      headers: {
        'X-WSSE': wsse.generateAuth(username, secret)['X-WSSE']
      },
      dataType: 'text',
    });
  };
}]);

And this is what I have for the controller:

app.controller('mainController', ['$scope', 'mainFactory', function($scope, mainFactory) {
  mainFactory.success(function(data) {
    $scope.data = data;
  });
}]);

Currently I get an error saying mainFactory.success is not a function which I assume is because the factory isn't working yet.

I have resolved this question myself. The parameters I was passing to the first function in the factory were globally defined already and therefore getting over-written. The first function is not required anyway.

Here is the factory code:

app.factory('mainFactory', ['$http', function($http) {
  var wsse = new Wsse ();
  return {
    getAnalytics : function (){
      $http({
          method: 'POST',
          url: 'https://' + endpoint + '/admin/1.4/rest/?method=' + method,
          data: params,
          headers: {
            'X-WSSE': wsse.generateAuth(username, secret)['X-WSSE']
          }
        })
        .success(function(data) {
          return data;
        })
        .error(function(err) {
          return err;
        });
    }
  };
}]);

And here is the controller code:

app.controller('mainController', ['$scope', 'mainFactory', function($scope, mainFactory) {
  $scope.title = "Inn Site";
  $scope.data = mainFactory.getAnalytics();
}]);

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM