0

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

当事件触发时，执行以下操作

  • 项目清单
  • 检查具有该上下文的数据是否已经缓存，服务缓存
  • 如果没有缓存，去抖动 500ms
  • 检查其他 http 调用是否正在运行（对于相同的上下文）并杀死它们
  • 拨打 http 电话
  • 成功缓存和更新/替换模型数据

当涉及到预输入功能时，几乎是标准的

我想使用 observables...顺便说一下，如果以前的调用正在运行，我可以取消它们

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

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

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 的 debounce

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

onChartSelectionDebaunced: Function;

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

1 回答 1

1

对于 debance，您可以使用Underscore.js。该函数将如下所示：

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

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

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

看看：在 RxJs 5 中共享 Angular 2 Http 网络调用结果的正确方法是什么？

于 2016-08-25T11:29:42.600 回答