How to add a custom property or method to a promis

Question

Regular promises have the beloved .then() and .catch() functions.

When promising to retrieve an object that itself has properties that return promises we find chains of promises such as the following:

require("clientside-view-loader")
    .then((view)=>
        return view.load("clientside-view-modal-login_signup");
    })
    .then((compiler)=>{
        return compiler.generate()
    })
    .then((modal)=>{
        document.body.appendChild(modal);
        modal.show("login");
    })

This is UGLY!

How can we modify a promise to attach a custom property so that we can convert the above into the following?

require("clientside-view-loader")
    .load("clientside-view-modal-login_signup")
    .generate()
    .then((modal)=>{
        document.body.appendChild(modal);
        modal.show("login");
    })

note, these examples use the clientside-require require and not the nodejs require

Answer 1

How can we modify a promise to attach a custom property so that we can convert the above into the following?

You don't modify promises at all. You just implement the builder pattern for the above promise chain.

class ClientSideViewLoader {
  constructor(p = Promise.resolve()) {
    this.promise = p;
  }
  static init() {
    return new this(require("clientside-view-loader"));
  }
  load(x) {
    return new this.constructor(this.promise.then(view =>
      view.load(x)
    ));
  }
  generate() {
    return new this.constructor(this.promise.then(compiler => 
      compiler.generate()
    ));
  }
  then(...args) {
    return this.promise.then(...args);
  }
}

ClientSideViewLoader.init()
.load("clientside-view-modal-login_signup")
.generate()
.then(modal => {
  document.body.appendChild(modal);
  modal.show("login");
})

No need to do anything complicated like subclassing Promise. If you want, you can also dynamically generate all these methods.

This is UGLY!

Well, if you were looking for beautiful promise code, you would simply use modern async/await syntax instead of then callbacks:

const view = await require("clientside-view-loader");
const compiler = await view.load("clientside-view-modal-login_signup");
const modal = await compiler.generate();
document.body.appendChild(modal);
modal.show("login");

Answer 2

If you know the properties you wish to add in advance you can simply append a property to the promise like you would any other object:

view_loader.load = function(path){
    return this.then((view_loader)=>{
        return view_loader.load(path)
    })
}
view_loader.load(...) // now works!

Here's a function that does this for a dynamic set of properties:

function modify_orig_promise(original_promise, properties_to_append){
    var blacklist = ["then", "catch", "spread"];
    var function_keys = Object.keys(properties_to_append);
    for(var i = 0; i < function_keys.length; i++){
        var function_key = function_keys[i];
        if(blacklist.indexOf(function_key) > -1) {
            console.warn("properties_to_append in require(__, {functions : {} }) included a blacklisted function name : `"+key+"`. skipping this property.")
        } else {
            var requested_function = properties_to_append[function_key];
            original_promise[function_key] = requested_function; // append the function to the promise
        }
    }
    return original_promise;
}

Then

var properties_to_append = {
    load : function(path){
        return this.then((view_loader)=>{ return view_loader.load(path)}) 
    }
}
modified_require = modify_orig_promise(require("clientside-view-loader"), properties_to_append);
modified_require.load("clientside-view-modal-login_signup") // Works

---

If you dont know the properties in advance (e.g., the properties are determined from a promise) you'll need to use a proxy that waits until that promise resolves to respond. This is answered here: How to add properties to a promise asynchronously?

Answer 3

Your initial code can be made shorter and more readable simply by using different syntax for your arrow functions. These two rules of arrow function syntax are relevant:

• parentheses are optional around the only argument of single-argument functions
• single-statement functions that return a value can have the {} and the return removed

Thus, you could write your code like this, with the short form view => … instead of (view) => { return …; }:

require("clientside-view-loader")
    .then(view => view.load("clientside-view-modal-login_signup"))
    .then(compiler => compiler.generate())
    .then(modal => {
        document.body.appendChild(modal);
        modal.show("login");
    });