Angular2：带有可观察对象的多个 http 调用（预先输入）的示例

Question

所以我正在处理我的应用程序中的几个案例，我需要在这些案例中发生以下情况

事件触发后，执行以下操作

列表项
检查具有该上下文的数据是否已缓存，提供缓存
如果没有缓存，debounce 500ms
检查其他 http 调用是否运行（对于相同的上下文）并终止它们
进行 http 调用
成功缓存和update/replace模型数据

在预输入功能方面相当标准

我想对此使用可观察对象...顺便说一句，如果之前的调用是运行

，我可以取消它们

有什么好的教程吗？我环顾四周，找不到任何远程更新的东西

好的，给你一些线索我现在做了什么：

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

此处缺少去抖

-- 我最终实现了 lodash 的去抖

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

onChartSelectionDebaunced: Function;

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

Answer 1

对于 debaunce，您可以使用 Underscore.js。该函数看起来像这样：

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

关于Observable的取消，最好用Observable的方法share。在您的情况下，您应该通过将 .share() 添加到 return 的 Observable 来更改 tableService 中的方法 getChartTable。

这样，即使您多次订阅它，也只会对服务器进行一次调用（没有这种情况，每个新订阅都会调用新调用）。

看看：

Angular2：带有可观察对象的多个 http 调用（预先输入）的示例

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

caching

angular2-http

angular2-observables

angular