How to add a custom property or method to a promise?

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

score 6 · Accepted Answer · answered Feb 14 '18 at 21:04

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");

Is there anyway that I can "resolve" this builder class `ClientSideViewLoader` from a promise? e.g., `require("clientside-view-loader")` resolves `ClientSideViewLoader.init()`? My problem is that the `load` and `generate` methods are defined asynchronously. — Ulad Kasach, Feb 15 '18 at 16:13
@UladKasach Of course you can make a module that directly returns a builder instance. But I'm not sure what you mean by "asynchronously" - no, the builder methods must be defined from the get go, otherwise the builder calls would need to be placed inside a promise chain - quite pointless. — Bergi, Feb 15 '18 at 16:30
I've clarified my question at https://stackoverflow.com/questions/48812252/how-to-add-properties-to-a-promise-asynchronously, since i was too general in the original question on this thread. Could you take a look? — Ulad Kasach, Feb 15 '18 at 16:45

score 1 · Answer 2 · answered Feb 14 '18 at 21:37

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");
    });

If arrow functions need to return an object literal however you need to use parentheses: `x=>({someProp:x})` — HMR, Feb 15 '18 at 03:20

Ulad Kasach · Answer 3 · 2018-02-15T18:03:02.603

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?

How to add a custom property or method to a promise?

3 Answers3

Linked