Angular2: Example with multiple http calls (typeahead) with observables

Question

So I am working on couple of cases in my app where I need the following to happen

When event triggered, do the following

List item
check if the data with that context is already cached, serve cached
if no cache, debounce 500ms
check if other http calls are running (for the same context) and kill them
make http call
On success cache and update/replace model data

Pretty much standard when it comes to typeahead functionality

I would like to use observables with this... in the way, I can cancel them if previous calls are running

any good tutorials on that? I was looking around, couldn't find anything remotely up to date

OK, to give you some clue what I did now:

onChartSelection(chart: any){

        let date1:any, date2:any;

        try{
            date1 = Math.round(chart.xAxis[0].min);
            date2 = Math.round(chart.xAxis[0].max);

            let data = this.tableService.getCachedChartData(this.currentTable, date1, date2);

            if(data){
                this.table.data = data;
            }else{

                if(this.chartTableRes){
                    this.chartTableRes.unsubscribe();
                }

                this.chartTableRes = this.tableService.getChartTable(this.currentTable, date1, date2)
                .subscribe(
                    data => {
                        console.log(data);
                        this.table.data = data;
                        this.chartTableRes = null;
                    },
                    error => {
                        console.log(error);
                    }
                );
            }

        }catch(e){
            throw e;
        }
    }

Missing debounce here

-- I ended up implementing lodash's debounce

import {debounce} from 'lodash';
...

onChartSelectionDebaunced: Function;

constructor(...){
    ...
    this.onChartSelectionDebaunced = debounce(this.onChartSelection, 200);
}

score 1 · Accepted Answer · edited May 23 '17 at 11:46

1

For debaunce you can use Underscore.js. The function will look this way:

onChartSelection: Function = _.debounce((chart: any) => {
   ...
});

Regarding the cancelation of Observable, it is better to use Observable method share. In your case you should change the method getChartTable in your tableService by adding .share() to your Observable that you return.

This way there will be only one call done to the server even if you subscribe to it multiple times (without this every new subscription will invoke new call).

Take a look at: What is the correct way to share the result of an Angular 2 Http network call in RxJs 5?

edited May 23 '17 at 11:46

Community

1
1

answered Aug 25 '16 at 11:29

Baumi

1,745
1
17
31

cheers for the suggestions... I am trying not to add underscore to the project... the js assets are already big as is :P... would be nice to have a angular2 version of this :) will check out the share method ;) – DS_web_developer Aug 25 '16 at 13:20
So you should try to use debounder from RxJS that you already have in your project: https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/debounce.md – Baumi Aug 25 '16 at 13:52
Looking at the code but doesn't make sense to me in http context... will figure it out, thanks – DS_web_developer Aug 25 '16 at 13:57
ended up using lodash's debounce... part of the implementation included in the question. Thanks @Baumi – DS_web_developer Aug 25 '16 at 14:56

Angular2: Example with multiple http calls (typeahead) with observables

1 Answers1