A JavaScript tool that facilitates the auto-resolution of objects when working with promises, ideal for frameworks such as Angular's

Question

A JavaScript tool that facilitates the auto-resolution of objects when working with promises, ideal for frameworks such as Angular's

Angulars $resource is equipped with a fantastic feature that allows objects to automatically update views by injecting values. Inside the $resource service lies a Resource object where the resolved result is copied using shallowClearAndCopy().

I am interested in chaining the promise returned from a $resource to achieve something similar to having the deferred result injected into a Resource object.

var otherProperty = 'somethingChanging';
var lazyUser = $resource('/user/:userId').get({id:id});
var userDisplayNamePromise = lazyUser.$promise.then(transformResult);
function transformResult(user){
  return { displayName: user.firstname + ' ' + user.lastname,
           other: user[otherProperty]
         };
}

Currently, I have to manually update the display user like this:

userDisplayNamePromise.then(updateDisplayUser);
function updateDisplayUser(displayName){$scope.user = displayName;}

But ideally, I would prefer to do something like:

$scope.user = something(userDisplayNamePromise);

I have not found an easy way to handle promises in this manner. Does anyone have any helpful suggestions?

I have included a basic working example on github.com/burka/resolvling. However, it's hard to believe that nobody has done this before?

javascript angularjs promise

Answer 1

Answer №1

There are established methods for altering the response of an angular resource.
Check out this demo
Refer to the official documentation

transformResponse – {function(data, headersGetter)|Array.} – This is a function or an array of functions used to transform the http response body and headers into a modified (typically deserialized) format. By default, the transformResponse contains one function that checks if the response resembles a JSON string and deserializes it using angular.fromJson. To avoid this behavior, set transformResponse to an empty array: transformResponse: []

Here is a sample code snippet

angular.module('services', ['ngResource']).
factory("someService", function ($resource) {
    return $resource(
        '/', {}, {
        get: {
            method: 'GET',
            transformResponse: function(data, headers){
                //MODIFYING THE DATA
                data = {};
                data.coolThing = 'BOOM-SHAKA-LAKA';
                return data;
            }
        }
    }

    );
});

Answer 2

There are established methods for altering the response of an angular resource.
Check out this demo
Refer to the official documentation

transformResponse – {function(data, headersGetter)|Array.} – This is a function or an array of functions used to transform the http response body and headers into a modified (typically deserialized) format. By default, the transformResponse contains one function that checks if the response resembles a JSON string and deserializes it using angular.fromJson. To avoid this behavior, set transformResponse to an empty array: transformResponse: []

Here is a sample code snippet

angular.module('services', ['ngResource']).
factory("someService", function ($resource) {
    return $resource(
        '/', {}, {
        get: {
            method: 'GET',
            transformResponse: function(data, headers){
                //MODIFYING THE DATA
                data = {};
                data.coolThing = 'BOOM-SHAKA-LAKA';
                return data;
            }
        }
    }

    );
});

Answer 3

Answer №2

Uncovering promises is a regular practice in handling asynchronous operations and should be acknowledged as a necessity.

The idea of self-populating objects in $resource goes against the norm in asynchronous workflows, and depending on its usage, it might be viewed as an anti-pattern.

It's not feasible because displayName is meant to be a singular value:

$scope.displayName = something(userDisplayNamePromise);

However, this is something that $q promises struggle with without extensive adjustments (as shown in the repository):

$scope.displayObj = something(userDisplayNamePromise);

Although it may function for object bindings like {{ displayObj.name }}:

$scope.displayObj = userDisplayNamePromise.$$state.value;

Using this approach in a production environment is not recommended - not only due to the fact that internal $$ properties should be avoided, but also because $$state.value could contain a value for a rejected promise.

In an ES6 or Babel-transpiled ES5 setting, co and generators can be utilized to streamline promises:

var wrap = (fn) => {
  return function(...args) {
    co(fn.bind(this, ...args));
  }
}

app.controller('AppController', ['$scope', '$q', wrap(function* ($scope, $q) {
  this.name = yield $q.resolve('World');
})]);

For ngRoute and UI Router, utilizing route resolvers can inject resolved values into controllers and bind these values to the scope, offering a common solution to avoid unwrapping code.

Answer 4

Uncovering promises is a regular practice in handling asynchronous operations and should be acknowledged as a necessity.

The idea of self-populating objects in $resource goes against the norm in asynchronous workflows, and depending on its usage, it might be viewed as an anti-pattern.

It's not feasible because displayName is meant to be a singular value:

$scope.displayName = something(userDisplayNamePromise);

However, this is something that $q promises struggle with without extensive adjustments (as shown in the repository):

$scope.displayObj = something(userDisplayNamePromise);

Although it may function for object bindings like {{ displayObj.name }}:

$scope.displayObj = userDisplayNamePromise.$$state.value;

Using this approach in a production environment is not recommended - not only due to the fact that internal $$ properties should be avoided, but also because $$state.value could contain a value for a rejected promise.

In an ES6 or Babel-transpiled ES5 setting, co and generators can be utilized to streamline promises:

var wrap = (fn) => {
  return function(...args) {
    co(fn.bind(this, ...args));
  }
}

app.controller('AppController', ['$scope', '$q', wrap(function* ($scope, $q) {
  this.name = yield $q.resolve('World');
})]);

For ngRoute and UI Router, utilizing route resolvers can inject resolved values into controllers and bind these values to the scope, offering a common solution to avoid unwrapping code.

A JavaScript tool that facilitates the auto-resolution of objects when working with promises, ideal for frameworks such as Angular's

Answer №1

Answer №2

Similar questions

Sending an object as a prop in React component

Adding hyperlinks that do not redirect

What is the best way to update objects in different scopes within AngularJS?

(JS) utilizing an external .js function by using the <script> tag

Trouble with Automatically Updating ObjectID in MongoDB using Node.js

Merging Technology: Integrating Maps into Hybrid Applications

Properly configuring paths in react-native for smooth navigation

What is the process for "unleashing" the X Axis following the execution of chart.zoom()?

Achieving closure by fulfilling the previously fulfilled promise once more

Is there a way to selectively import specific functions from a file in NextJs/React rather than importing the entire file?

Add Text to HTML and Delete Added Content Upon Button Click

Is it possible to make the v-toolbar-title fixed within a v-navigation-drawer using Vuetify?

Setting up a NodeJS project (built with Express and Angular) on a Ubuntu Cloud Server with NGINX hosting

Error: The element at point (713, 6) is currently not clickable due to an unknown issue. Another element, specifically the container with class "container," is blocking the click

Perform the function prior to making any adjustments to the viewmodel attributes

Is there a way to implement a local gltf loader in three.js to display on a GitHub server within my repository?

What are the steps to disable CSS in order to speed up the execution of automation tests?

What could be the reason for the `controller.$render` method not being triggered as intended?

Conceal the href element within a designated UL using JavaScript

Looping through JavaScript to generate HTML code