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

Guide on Executing a Callback Function Once an Asynchronous For Loop Completes

Transferring a zipped file between a Node.js server and a Node.js client

React not displaying wrapped div

Reducing div size when clicked - Using JQuery version 1.9

Issues with the code: $("input[type=checkbox]:checked").each(function() { var checkboxId = $(this).attr("id"); });

Using Javascript, verify if a given URL is legitimate and commences with "http://" or "https://"

Preloading Vue dynamic routes for optimal performance

Adjust width based on value dynamically

How to verify CSRF protection on Node.js/Express endpoints

Unused function in Vue error compilation

Is there a way to minimize superfluous re-renders in React without resorting to the useMemo hook?

Having trouble getting this JavaScript query to function properly

The list item click event is not triggered when new list items are added

How can an Embedded React + JSS component safeguard generic elements such as <button> and <p> from being affected by the page's style?

Even though there is an error in the line of code saying "Error in render: RangeError: Invalid array length", it still manages to perform its intended task

show the attributes of an item contained within an array of objects

Alter the class generated by ng-repeat with a click

Tips for transferring data between two forms in separate iFrames

Ways to display pictures by invoking an API within the antd item list container

Storing user authentication tokens securely in session storage within Next.js can help maintain a