Angular JS: Saving information with a promise

Question

Angular JS: Saving information with a promise

One dilemma I am facing is figuring out where to store data that needs to be accessed in the final callbacks for an http request. In jQuery, I could easily handle this by doing the following:

var token = $.get('/some-url', {}, someCallback);
token.oSomeObject = {data: 'some data'};

function someCallback( data, status, token ){
     token.oSomeObject.data // 'some data'
}

I utilize the token to store request-specific data.

In Angular, the only way I have found to achieve this is by storing the data in the actual config object:

var config = {
    url: '/some-url',
    method: 'GET',
    oSomeObject: { data: 'some data' }
};
$http(config).success(someCallback);

function someCallback( data, status, headers, config ){
     config.oSomeObject.data // 'some data'
}

This approach not only hinders the use of shorthand calls ($http.get, $http.post) but also seems more cumbersome when encapsulating the calls in a specific service module.

Is there an alternative method to address this issue?

Additional Clarification

It's possible that I am overlooking a simple solution regarding how to properly utilize the promise API. To ensure clarity, allow me to provide more context on the matter.

I have two files: 1) Controller.js and 2) AjaxServices.js (where all ajax calls are defined as methods on a service).

The content of AjaxServices.js is as follows:

app.service('AjaxService', function( $http ){
     var self = this;

     this.createUser = function( oUser, fSuccessCallback ){
          return $http.put('/api/user', {oUser: oUser})
                       .success(fSuccessCallback);
     }
}

As for Controller.js, it appears like this:

app.controller('MyController', function( $scope, AjaxServices ){
     $scope.saveUser = function( oUser ){
          var oPromise = AjaxServices.createUser( oUser, $scope.onUserSaved );

          oPromise.oUser = oUser // This is my workaround from using jQuery.ajax. 
                                 // The oPromise will be passed as the token object in the onUserSaved callback
     }
     $scope.onUserSaved = function( oStatus, status, headers, config ){
          oStatus.id // Here lies the id of the newly created user,
                     // which I aim to link with the local oUser object now

     }
}

How would you handle the same scenario utilizing the promise API?

javascript angularjs

Answer 1

Answer №1

UPDATE 2. Some insights on the new code: Instead of passing the callback to the service, let the service handle its task independently without being tied to any data consumer. This allows for attaching multiple callbacks to the same service $http call. Moving on to the controller as the data consumer:

app.service('AjaxService', function( $http ){
    var self = this;

    this.createUser = function( oUser ){
      return $http.put('/api/user', {oUser: oUser});
    }
}

With this approach, the service is not concerned with callbacks, opening up the possibility to attach multiple ones to a single service $http call. Now onto the controller:

app.controller('MyController', function( $scope, AjaxServices ){
  $scope.saveUser = function( oUser ){
    var originalPromise = AjaxServices.createUser( oUser );
    
    var modifiedPromise = originalPromise.then(function(response) {
      response.oUser = oUser; 
      return response;
    });
   
    modifiedPromise.then($scope.onUserSaved); 
  }
  
  $scope.onUserSaved = function(responseWithUser) {
    responseWithUser.oUser;
  }
}

It may seem clumsy to pass oUser through promises when it can be saved directly in the controller's scope and accessed from there.

UPDATE. It is possible to chain promises in any context. Here's an example of injecting a token using a service:

myModule.factory('Service', function($http) {
   return new function() {
      this.getData = function() {
        return $http.get(url).then(function(response) {
          response.token = myToken;
          return response;
        }
      }
   }
});

You can extend or wrap the $http service to inject tokens without services being aware. For multiple requests, consider using a $httpInterceptor. Learn more about intercepting http calls here

Original answer

Utilize the promise provided by $http to chain another promise that injects a token into the response:

myModule.factory('Service', function($http) {
   return new function() {
      this.getData = function() {
        return $http.get(url);
      }
   }
});

//in controller or other service:
var myToken;
var tokenizedPromise = Service.getData().then(function(response) {
  response.token = myToken;
  return response;
});

The final recipient of the promise also has access to the token

Answer 2

UPDATE 2. Some insights on the new code: Instead of passing the callback to the service, let the service handle its task independently without being tied to any data consumer. This allows for attaching multiple callbacks to the same service $http call. Moving on to the controller as the data consumer:

app.service('AjaxService', function( $http ){
    var self = this;

    this.createUser = function( oUser ){
      return $http.put('/api/user', {oUser: oUser});
    }
}

With this approach, the service is not concerned with callbacks, opening up the possibility to attach multiple ones to a single service $http call. Now onto the controller:

app.controller('MyController', function( $scope, AjaxServices ){
  $scope.saveUser = function( oUser ){
    var originalPromise = AjaxServices.createUser( oUser );
    
    var modifiedPromise = originalPromise.then(function(response) {
      response.oUser = oUser; 
      return response;
    });
   
    modifiedPromise.then($scope.onUserSaved); 
  }
  
  $scope.onUserSaved = function(responseWithUser) {
    responseWithUser.oUser;
  }
}

It may seem clumsy to pass oUser through promises when it can be saved directly in the controller's scope and accessed from there.

UPDATE. It is possible to chain promises in any context. Here's an example of injecting a token using a service:

myModule.factory('Service', function($http) {
   return new function() {
      this.getData = function() {
        return $http.get(url).then(function(response) {
          response.token = myToken;
          return response;
        }
      }
   }
});

You can extend or wrap the $http service to inject tokens without services being aware. For multiple requests, consider using a $httpInterceptor. Learn more about intercepting http calls here

Original answer

Utilize the promise provided by $http to chain another promise that injects a token into the response:

myModule.factory('Service', function($http) {
   return new function() {
      this.getData = function() {
        return $http.get(url);
      }
   }
});

//in controller or other service:
var myToken;
var tokenizedPromise = Service.getData().then(function(response) {
  response.token = myToken;
  return response;
});

The final recipient of the promise also has access to the token

Angular JS: Saving information with a promise

Additional Clarification

Answer №1

Similar questions

MUI: Autocomplete received an invalid value. None of the options correspond to the value of `0`

Strange JSON.parse quirk observed in Node.js when dealing with double backslashes

The rendering of the input dropdown control in Angular JS is experiencing difficulties

Implementing a Reset Button to Clear Checkboxes with PHP or JavaScript

Run a Node command when the button is clicked

Making an asynchronous request using Ajax to verify the status of a checkbox

Guide to invoking a server-side function through JSON data?

Missing Ajax Functionality in Laravel Application

Executing jQuery script on dynamically loaded content

advancement in the $.when function

Is it appropriate to use a component inside an entry component?

looking to implement auto-scroll feature in flatlist using react native

The ng-controller (dropdown menu) is functioning properly when tested locally and on JSFiddle, however, it is not working on

Error: Unable to assign values to undefined properties (specifically 'styles') when using withLess, withSass, or withCSS in next.config.js within Next.js

Using ajax to submit a request to the controller

Encountering: Unable to break down the property 'DynamicServerError' of 'serverHooks' as it does not have a defined value

The choices in the cell table selection are obscured due to the select table's height when opened

Is it possible to remove the browsing history of user inputs in JavaScript?

Updating the dynamic site script to be compatible with the newest version of the jQuery library

Component in Angular2 encountering a null value