繁体   English   中英

Angular2:带有可观察对象的多个http调用(预先输入)的示例

[英]Angular2: Example with multiple http calls (typeahead) with observables

所以我正在我的应用程序中处理一些情况,我需要进行以下操作

事件触发后,请执行以下操作

  • 项目清单
  • 检查具有该上下文的数据是否已被缓存,服务已缓存
  • 如果没有缓存,则反跳500ms
  • 检查其他http调用是否正在运行(针对相同的上下文)并杀死它们
  • 拨打http电话
  • 成功缓存和更新/替换模型数据时

提前输入功能几乎是标准的

我想与此一起使用可观察对象...,如果先前的通话正在运行,我可以取消它们

有什么好的教程吗? 我环顾四周,找不到远程最新信息

好,给你一些线索,我现在做了什么:

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

对于debaunce可以使用Underscore.js 该函数将如下所示:

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

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

这样,即使您多次订阅服务器,也只会对服务器进行一次调用(如果没有,则每个新订阅都会调用新调用)。

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM