What is the best way to turn each function within the module pattern into a promise?

Question

What is the best way to turn each function within the module pattern into a promise?

Utilizing Angular 1.5, I have developed a factory function that returns a literal object structured as follows:

return {
   item: null,
   get: function() {
     return item;
   },
   create: function() {
     if (this.get()){
         this.remove();
     }

     this.item = {};
   },
   remove: function() {
     var item = this.get();
     if (item) {
      this.item = null;
     }
   },
   add: function() {
     if (!this.get()) {
        this.create();
     }

     this.item.newprop = 'value';
   }
}

I prefer to keep the object structure with its own actions and properties rather than changing to function declarations.
The pattern of nesting functions like get inside create is original to my design. Does this approach have a specific name and is it considered an optimal way to handle function-black boxes?
What would be the most effective method to incorporate Promises within each function so that they all return a Promise?
Is it necessary to use bind for every then function call?

For example:

create: function () {
    this.get()
        .then(remove)
        .then(function () {
            this.item = {}; // However, in this context, 'this' is undefined!!
        });
}

javascript angularjs design-patterns module promise

Answer 1

Answer №1

Each then callback function must include the use of bind:

var myModule = {
    item: null,
    get: function() {              
        return Promise.resolve(this.item);
    },
    create: function() {
        return this.remove().then(function() {
            this.item = {};
        }.bind(this));
    },
    remove: function() {
        return this.get().then(function(item) {
            if (item) {
                this.item = null;
            }
        }.bind(this));              
    },
    add: function() {
        return this.get().then(function(item) {
            return item || this.create();
        }.bind(this)).then(function() {
            this.item.newprop = 'value';
        }.bind(this));
    }
}                   
// Let's observe it in action:
myModule.create().then(function() {
    return myModule.get();
}).then(function(item) {
    console.log("After create: ", item);
    return myModule.remove();
}).then(function() {
    return myModule.get();
}).then(function(item) {
    console.log("After remove: ", item);
    return myModule.add();
}).then(function() {
    return myModule.get();
}).then(function(item) {
    console.log("After add: ", item);
});

Answer 2

Each then callback function must include the use of bind:

var myModule = {
    item: null,
    get: function() {              
        return Promise.resolve(this.item);
    },
    create: function() {
        return this.remove().then(function() {
            this.item = {};
        }.bind(this));
    },
    remove: function() {
        return this.get().then(function(item) {
            if (item) {
                this.item = null;
            }
        }.bind(this));              
    },
    add: function() {
        return this.get().then(function(item) {
            return item || this.create();
        }.bind(this)).then(function() {
            this.item.newprop = 'value';
        }.bind(this));
    }
}                   
// Let's observe it in action:
myModule.create().then(function() {
    return myModule.get();
}).then(function(item) {
    console.log("After create: ", item);
    return myModule.remove();
}).then(function() {
    return myModule.get();
}).then(function(item) {
    console.log("After remove: ", item);
    return myModule.add();
}).then(function() {
    return myModule.get();
}).then(function(item) {
    console.log("After add: ", item);
});

What is the best way to turn each function within the module pattern into a promise?

Answer №1

Similar questions

Incorporate dynamic rules into a CSS stylesheet

Ways to extract values from a javascript hash map by exclusively incorporating an array

The function element.innerHTML is invalid when trying to assign an object value as an option

After the page has finished loading, the JavaScript code is not able to

Tips for combining Nuxt with Vue Cli 3

Is there a library available that can assist me in writing JavaScript code within C#?

IE11 not running Angular code inline as expected

Tips for synchronizing the bounding box rotation and dimensions of a fabric group with its objects

"Multiple instances of JavaScript files seem to be present when using Ajax navigation

What is the best way to include a second (concealed) value in a cell using datatables

Issues with using a personalized font in a Stenciljs project

Issues with the functionality of the shopping cart are causing a disruption

Using the DRY principle in JavaScript to handle dynamic fields

Updating a nested document within an array - Utilizing MongoDB with the Node.js driver

"JavaScript throws an 'Undefined' error when trying to access a basic

Having trouble with ng-click not correctly updating values within ng-repeat

Discover classes dynamically and eliminate redundant div elements

What is the best way to assign an object variable within an array state?

Passing no data in Angular.js ui-router.Angular.js ui-router

Issue encountered while attempting to adjust a date (the modification was incorrect)