Caching JavaScript promise results

Question

I would make one call to the server to get a list of items. How do I make sure that only one call is made and the collections is processed only once to create a key value map.

var itemMap = {};

function getItems(){
    getAllItemsFromServer().then(function(data){
     data.forEach(value){
       itemMap[value.key] = value;
     }});
     return itemMap;

}

//need to get the values from various places, using a loop here  
//to make multiple calls
var itemKeys = ['a', 'b', 'c'];
itemKeys.forEach(key){
   var value = getItems().then(function(data){ return data[key]});
   console.log('item for key=' + value);
}

Answer 1

I'm going to add a generic method for caching a promise operation. The trick here is that by treating the promise as a real proxy for a value and caching it and not the value we avoid the race condition. This also works for non promise functions just as well, illustrating how promises capture the concept of async + value well. I think it'd help you understand the problem better:

function cache(fn){
    var NO_RESULT = {}; // unique, would use Symbol if ES2015-able
    var res = NO_RESULT;
    return function () { // if ES2015, name the function the same as fn
        if(res === NO_RESULT) return (res = fn.apply(this, arguments));
        return res;
    };
}

This would let you cache any promise (or non promise operation very easily:

 var getItems = cache(getAllItemsFromServer);


 getItems();
 getItems();
 getItems(); // only one call was made, can `then` to get data.

Note that you cannot make it "synchronous".

Answer 2

I think what you're really looking for is

var cache = null; // cache for the promise
function getItems() {
    return cache || (cache = getAllItemsFromServer().then(function(data){
        var itemMap = {};
        data.forEach(function(value){
            itemMap[value.key] = value;
        });
        return itemMap;
    }));
}

var itemKeys = ['a', 'b', 'c'];
itemKeys.forEach(function(key){
    getItems().then(function(data){
        return data[key];
    }).then(function(value) {
        console.log('item for key=' + value);
    }); // notice that you get the value only asynchronously!
});

Answer 3

A promise is stateful, and as soon as it's fulfilled, its value cannot be changed. You can use .then multiple times to get its contents, and you'll get the same result every time.

The getAllItemsFromServer function returns a promise, the then block manipulates the responses and returns the itemMap, which is wrapped in a response (promise chaining). The promise is then cached and can be used to get the itemMap repeatedly.

var itemsPromise = getItems(); // make the request once and get a promise

function getItems(){
    return getAllItemsFromServer().then(function(data){
       return data.reduce(function(itemMap, value){
          itemMap[value.key] = value;
          return itemMap;
       }, {});
    });
}

//need to get the values from various places, using a loop here  
//to make multiple calls
var itemKeys = ['a', 'b', 'c'];
itemKeys.forEach(function(key){
    itemsPromise.then(function(data){ 
        return data[key];
    }).then(function(value) {
       console.log('item for key=' + value);
    });
});