Angular请求防抖处理第一次请求失效问题


Posted in Javascript onMay 17, 2019

问题:

根据项目中的需求,需要设计一个下拉框,在输入时根据内容提供实时的建议,在此我们使用了如下组件,

<p-autoComplete [(ngModel)]="text" [suggestions]="results" 
(completeMethod)="search($event)">
</p-autoComplete>

因为我们需要根据输入内容实时的查询后台返回结果,如果每次更改都要传给后台的话,太耗费资源,而且对用户也不友好,为此我们采用了angular的请求防抖做处理,代码如下。

packages$: Observable<NpmPackageInfo[]>;
private searchText$ = new Subject<string>();

search(packageName: string) {
 this.searchText$.next(packageName);
}
ngOnInit() {
 this.packages$ = this.searchText$.pipe(
 debounceTime(500),
 distinctUntilChanged(),
 switchMap(packageName =>
  this.searchService.search(packageName, this.withRefresh))
 );
}

作用如下:

debounceTime(500) - 等待,直到用户停止输入(这个例子中是停止 1/2 秒)。

distinctUntilChanged() - 等待,直到搜索内容发生了变化。

switchMap() - 把搜索请求发送给服务。

但当我们使用的时候发现在初始化第一次请求的时,并不会调用service的方法,错误代码如下:

private searchText$ = new Subject<string>();
packages$: Observable<InstrumentAlias[]>;
ngOnInit() {
// 创建可观察着对象
this.packages$ = this.searchText$.pipe(
   debounceTime(500),
   distinctUntilChanged(),
   switchMap(packageName =>
    this.instrumentAliasService.queryInstrumentAliasByName(packageName))
  );
}
this.searchText$.next(this.queryName);
this.packages$.subscribe((instrumentAliases: Array<InstrumentAlias>) => {
 this.filteredinstrumentAlias = instrumentAliases;
}, () => {
 console.log('get instrumentAliases error');
});

searchText$ 是一个序列,包含用户输入到搜索框中的所有值。 它定义成了 RxJS 的 Subject 对象,这表示它是一个多播 Observable,同时还可以自行调用 next(value) 来产生值,在上面错误的代码中,因为我们先调用的时next方法,这是虽然产生了值,但是还没有进行订阅,所以第一次的值并不会向后台发起请求,而之后因为我们已经订阅了这个东西,所以第一次请求之后的请求都有效果。

结果方法:

在初始化的时候就进行订阅,这样在之后的查找我们只需要使用next传值即可,我们已订阅的对象就会自动触发后台请求。

总结:

写功能的时候只是简单的对代码进行复制粘贴,并没有真正的理解angular的观察者的设计机制,通过这个错误加深了对angular观察者的理解。

以上所述是小编给大家介绍的Angular请求防抖处理第一次请求失效问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
微信小程序 教程之注册程序
Oct 17 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 #Javascript
小程序云开发如何实现图片上传及发表文字
May 17 #Javascript
tsconfig.json配置详解
May 17 #Javascript
小程序云函数调用API接口的方法
May 17 #Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 #Javascript
微信小程序云开发之使用云函数
May 17 #Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 #jQuery
You might like
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
PHP生成唯一订单号
2015/07/05 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
JavaScript 学习笔记(六)
2009/12/31 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
Python中的Django基本命令实例详解
2018/07/15 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
工程造价专业大学生自荐信
2013/10/01 职场文书
毕业生个人求职的自我评价
2013/10/28 职场文书
木工主管岗位职责
2013/12/08 职场文书
白酒市场开发计划书
2014/01/09 职场文书
岳父生日宴会答谢词
2014/01/13 职场文书
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
结婚堵门保证书
2015/05/08 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
Django drf请求模块源码解析
2021/06/08 Python
HTML基础详解(上)
2021/10/16 HTML / CSS
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL