Reusing the result of an http call

Question

I have the following use case:
Two visual grids are using two methods to load the data to display. These methods are automatically called by the grids and this part cannot be changed, it's by design:

    loadDataForGrid1 = (params: any): any => {
        return this.httpService.getData().then((response) => {
                return response.dataGrid1;
            }, (err) => {
        });
    }

    loadDataForGrid2 = (params: any): any => {
        return this.httpService.getData().then((response) => {
                return response.dataGrid2;
            }, (err) => {
        });
    }

Everything is working fine but my problem is performance. Since the getData method does an http request that is quite huge, calling it twice like Im doing right now is not acceptable. It there a way to solve this problem by doing only one call? Like caching the data so that they are reusable by the second call?

Im using typescript and angularjs

Edit:

Something like this would not work since the result would not be available when the grids load the data:

result: any;
// called at the beginning, for example contructor
loadData = (params: any): any => {
        return this.httpService.getData().then(result => {
            this.result = result;
        });
    }

loadDataForGrid1 = (params: any): any => {
        return this.result.gridGrid1;
    }

loadDataForGrid2 = (params: any): any => {
        return this.result.gridGrid2;
    }}

Using the answer suggested by @georgeawg generates the following javascript (which does 2 calls)

this.loadDataForGrid1 = function (params) {
    _this.promiseCache = _this.promiseCache || _this.httpService.getData();
    return _this.promiseCache.then(function (response) {
        return response.gridGrid1;
    }, function (err) {
    });
};
this.loadDataForGrid2 = function (params) {
    _this.promiseCache = _this.promiseCache || _this.httpService.getData();
    return _this.promiseCache.then(function (response) {
        return response.gridGrid2;
    }, function (err) {
    });
};

Answer 1

You can always store the the data array in a variable on the page for SPA. If you want to use the data over different pages, you can use localStorage to 'cache' the data on the client-side.

localStorage.set("mydata", response.dataGrid1);
localStorage.get("mydata");

FYI, i does not seem you are using typescript, but rather native javascript :-)

-- Why don't you do something like this, or am i missing something?

$scope.gridData = {};

loadDataForGrid1 = (params: any): any => {
        return this.httpService.getData.then((response) => {
                $scope.gridData = response;
            }, (err) => {
        }).finally(function(){
console.log($scope.gridData.gridData1);
console.log($scope.gridData.gridData2);
});
    }

Answer 2

What you can do is store the returned variable into a service variable and then do a check if it already exists.

dataGrid;

loadDataForGrid1 = (params: any): any => {
    if(!this.dataGrid) {
            return this.httpService.getData.then((response) => {
              this.dataGrid = response;
              return this.dataGrid.dataGrid1;
        }, (err) => {
      });
    }
    return this.dataGrid.dataGrid1;
}

loadDataForGrid2 = (params: any): any => {
    if(!this.dataGrid) {
       return this.httpService.getData().then((response) => {
              this.dataGrid = response;
              return this.dataGrid.dataGrid2;
        }, (err) => {
      });
    }
    return this.dataGrid.dataGrid2;
}

Something like this should work. Every time you call loadDataForGrid1 or loadDataForGrid2 you will first check if the data is already there - therefore you make an API call only once.

Answer 3

The solution is to cache the promise and re-use it:

var promiseCache;

this.loadDataForGrid1 = (params) => {
    promiseCache = promiseCache || this.httpService.getData();
    return promiseCache.then(result => {
        return result.gridGrid1;
    });
}

this.loadDataForGrid2 = (params) => {
    promiseCache = promiseCache || this.httpService.getData();
    return promiseCache.then(result => {
        return result.gridGrid2;
    });
}

Since the service immediately returns a promise, it avoids the race condition where the second XHR is started before the first XHR returns data from the server.

---

You mean that would be a javascript solution? But how to do it with typescript then?

JavaScript supports private variables.¹

function MyClass() {
    var myPrivateVar = 3;

    this.doSomething = function() {
        return myPrivateVar++;        
    }
}

In TypeScript this would be expressed like so:

class MyClass {

    doSomething: () => number;

    constructor() {
        var myPrivateVar = 3;

        this.doSomething = function () {
            return myPrivateVar++;
        }
    }
}

Answer 4

So, after many hours I came to the following solution. It's a bit a hack but it works.

In the initialization (constructor or so) Im loading the data:

this.httpService.getData().then((response) => {
            this.data1 = response.dataGrid1;
            this.data2 = response.dataGrid2;
            // other properties here...
            this.isReady= true;
        }, (err) => {
});

then I wrote an ugly wait method

    wait(): void {
        if (this.isReady) {
            return;
        } else {
            setTimeout(this.wait, 250);
        }
    }

Finally, my two methods look like this

    loadDataForGrid1 = (params: any): any => {
        this.wait();
        return this.$q.resolve(this.data1);
    }

    loadDataForGrid2 = (params: any): any => {
        this.wait();
        return this.$q.resolve(this.data2);
    }